现实的移动屏幕决议

Question

是否有任何矩阵能够为最常见的手机提供逼真的屏幕可用性,并考虑到工具栏可见的屏幕分辨率？

我们需要开发一个移动/平板电脑的滚动网站,虽然我们试图使css尽可能流畅,但简要依赖于背景图像,这意味着我们需要各种媒体查询来切换图像以获得最佳体验 - 一个现实的决议指南真的很有帮助.

干杯

Answer 1

在谷歌浏览器中,按F12键打开开发人员工具,然后点击齿轮图标进入设置 - >覆盖,打开"用户代理",然后选择所需的设备 - 使用"设备矩阵"可以自定义屏幕尺寸等等.

Answer 2

查看http://screensiz.es/phone.您可以按屏幕尺寸,宽高比和受欢迎程度订购手机或平板电脑.

另请参阅chrome canary dev工具中的截屏视频. http://www.html5rocks.com/en/tutorials/developertools/mobile/

我仍在寻找的东西就像谷歌的浏览器,但用于移动屏幕.

更新:

Google实验室浏览器大小现已成为Google Analytics的一部分

另请访问https://design.google.com/devices/以获取最新数据

Answer 3

@media(min-width:1200px){

@media(max-width:980px){

@media(max-width:979px){

@media(min-width:980px){

@media(min-width:768px)和(max-width:979px){

@media(max-width:768px){

@media(max-width:767px){

@media(max-width:480px){

应该是标准

Answer 4

有许多在线服务，您可以“通过”手机显示屏查看您的网站，并指定分辨率。

例如：手机模拟器