Opera MiniブラウザのCssを最適化するためのプラクティス

Question

私は、オペラがサーバーを通じて私たちのリソースをトンネルし、ユーザーに圧縮データを提供することを知っています。ここで

は、私はオペラ・ミニ（アンドロイド）を使用して訪問した2つのウェブサイト

1. はGithubにあるからGithub Screenshot ボタン（パッド入りません）不規則探しています。ボタン/入力ボックスの周りには醜い境界線があります。部門は適切に配置されていません。フォントはすべてシムサイズです。デフォルトのフォールバックフォントを使用します。画像は小サイズです（svg/png）はHQです。画像はハイパーリンクと重なり合っています。
2. アマゾン - Amazon Screenshot 美しい罫線。 Font-Familyは異なって見えます。フォントウェイトとフォントサイズも適切です（そして異なるものです）。 Divsは適切な方法でフローティングされ、整列されます。画像（svg/png）は、ハイパーリンクと重ならないHQ.Imagesです。

サイトの両方がモバイルChromeでよく見るP.S。

ほとんどのサイトは、Opera Miniで（1）と似ています。 他のショッピングサイト（eBayなど）は、Opera Miniでも適切に最適化されています。

基本的には、Amazonのように、eBayがそのような種類のモバイルブラウザであっても自分のサイトを非常によく見せるように設計しているかどうかについてのCSSの習慣を知りたいのです。

はまた、私のメディアクエリは、オペラ・ミニで働いて（しかし、モバイルChromeで見て美しいです）

@media(max-width:480px){ 
    #somerule{ 
       //not working 
    } 
} 

Answer 1

されていないあなたの質問は、同様に高レベルであるので、私は、高レベルのアドバイスを与えるでしょう。

caniuse.comにアクセスして、よくサポートされているHTML4/CSS2.1のタグ/属性を参照してください。 Opera Miniやそのilkに準拠したCSSを書くときは、ほとんどの場合、それに固執する必要があります。

もう1つのヒントは、Opera MiniでWebサイトを常にテストして、変更を加えたときの遵守を確認することです。これを行う最善の方法は、ご使用のシステムにOpera Mini Emulatorをインストールし、ngrokを使用してローカルホストをトンネリングすることです。テクニカルディテールはhereとよく書かれています。

最後に、私はBruce Lawsonでthisかなり決定的な記事を読むことをお勧めします。彼はメディア・クエリーにも触れる。

これは試行錯誤していますが、あなたが永続していればそこに着くでしょう。