考虑到可用的屏幕分辨率以及可见的工具栏，是否有一个矩阵可以为最常见的手机获得真实的屏幕可用性？
我们需要为手机/平板电脑开发一个滚动网站，尽管我们正在努力使 css 尽可能流畅，但摘要依赖于背景图像，这意味着我们需要各种媒体查询来切换图像以获得最佳体验- 一个现实的解决方案指南会非常有帮助。
干杯
【问题讨论】：
查看http://screensiz.es/phone。 您可以按屏幕尺寸、宽高比和受欢迎程度来订购手机或平板电脑。
还可以查看 chrome canary 开发工具中的截屏视频。 http://www.html5rocks.com/en/tutorials/developertools/mobile/
我仍在寻找类似google's browsersize 的东西，但适用于移动屏幕。
更新：
Google Labs Browser Size 现在是 Google Analytics 的一部分
如需最新数据，请查看https://design.google.com/devices/（现在也称为https://material.io/tools/devices/）
【讨论】：
这是移动设备的所有已知 CSS @media 属性 + 几种可以使用的桌面分辨率的列表。
其中包括 Android、iPhone、iPad、Google Nexus、LG、三星、诺基亚、HTC、摩托罗拉、索尼和所有知名品牌。
关注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){
}
【讨论】：
Statcounter 可能提供了对屏幕尺寸和许多其他统计数据的最佳计算。他们的页面总是给我加载问题，所以我更喜欢找到引用了他们统计数据的人，而不是直接访问源代码，比如这个博主：
希望这是对您问题的更直接的回答！
【讨论】：
您可能想尝试这里：http://cartoonized.net/cellphone-screen-resolution.php 它基本上可以根据手机类型为您提供最佳分辨率。
【讨论】：
@media（最小宽度：1200px）{
@media（最大宽度：980px）{
@media（最大宽度：979px）{
@media（最小宽度：980px）{
@media（最小宽度：768px）和（最大宽度：979px）{
@media（最大宽度：768px）{
@media（最大宽度：767px）{
@media（最大宽度：480px）{
应该是标准
【讨论】：
在谷歌浏览器中，按 F12 打开开发者工具，然后点击齿轮图标转到设置 -> 覆盖，打开“用户代理”，然后选择您想要的设备 - 使用“设备矩阵”您可以自定义屏幕尺寸等等。
【讨论】：
我认为你一定要试试这个网站：http://responsivetools.com/
它会让您快速了解您的网站在不同的移动设备和平板电脑分辨率下的外观。
【讨论】：
有许多在线服务，您可以“通过”手机显示屏查看您的网站，并指定分辨率。
【讨论】：