ツールバーが表示された状態で利用可能な画面解像度を考慮に入れて、最も一般的な携帯電話の現実的な画面利用可能性を取得するためのマトリックスはどこにありますか?
モバイル/タブレット用のスクロール サイトを開発する必要があり、css を可能な限り流動的にしようとしていますが、ブリーフは背景画像に依存しています。解決ガイドは本当に役に立ちます。
乾杯
Google Chromeで、F12キーを押して開発者ツールを開き、歯車アイコンをクリックして[設定]-> [上書き]に移動し、[ユーザーエージェント]をオンにして、目的のデバイスを選択します。[デバイスマトリックス]を使用すると、画面サイズなどをカスタマイズできます。 。
http://screensiz.es/phoneをチェックしてください。画面サイズ、縦横比、人気順で携帯電話やタブレットを注文できます。
chrome canary dev tools のスクリーンキャストもチェックしてください。 http://www.html5rocks.com/en/tutorials/developertools/mobile/
私がまだ探しているのは、Google のbrowsersizeのようなものですが、モバイル画面用です。
アップデート:
Google Labs Browser Size が Google Analytics の一部になりました
最新のデータについては、https://design.google.com/devices/ (別名 https://material.io/tools/devices/ ) を確認してください。
このウェブサイトをぜひお試しください: http://responsivetools.com/
モバイルやタブレットのさまざまな解像度でサイトがどのように見えるかを簡単に把握できます。
解像度を指定して、電話のディスプレイを「介して」サイトを表示できるオンライン サービスが多数あります。
これは、モバイル デバイス用のすべての既知の CSS @media プロパティと、使用できるいくつかのデスクトップ解像度のリストです。
これらには、Android、iPhone、iPad、Google Nexus、LG、Samsung、Nokia、HTC、Motorola、Sony、およびすべての有名ブランドが含まれます。
GitHubを見てください
@media all and (max-width: 2560px){
}
@media all and (max-width: 1920px){
}
@media all and (max-width: 1440px){
}
@media all and (max-width: 1280px){
}
@media all and (max-width: 1200px){
}
@media all and (max-width: 1024px){
}
@media all and (max-width: 992px){
}
@media all and (max-width: 768px){
}
@media all and (max-width: 720px){
}
@media all and (max-width: 600px){
}
@media all and (max-width: 540px){
}
@media all and (max-width: 480px){
}
@media all and (max-width: 424px){
}
@media all and (max-width: 414px){
}
@media all and (max-width: 400px){
}
@media all and (max-width: 384px){
}
@media all and (max-width: 375px){
}
@media all and (max-width: 360px){
}
@media all and (max-width: 320px){
}
ここにアクセスしてみてください: http://cartoonized.net/cellphone-screen-resolution.php基本的に、電話の種類に応じて最適な解像度が得られます。