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