Html 逼真的移动屏幕分辨率
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14456584/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Realistic Mobile Screen Resolutions
提问by Dancer
Is there a Matrix anywhere to get realistic screen availability for the most common phones which take into account the screen resolution available with toolbars visible?
是否有任何地方都可以使用 Matrix 来为最常见的手机获得真实的屏幕可用性，并考虑到工具栏可见时可用的屏幕分辨率？
We need to develop a scrolling site for mobile/tablet and although we are trying to make the css as fluid as possible the brief relies on background imagery which means we need a variety of media queries to switch the images for the best experience - a realistic resolution guide would be really helpful.
我们需要为移动/平板电脑开发一个滚动站点，尽管我们试图使 css 尽可能流畅，但摘要依赖于背景图像，这意味着我们需要各种媒体查询来切换图像以获得最佳体验 - 一个现实的分辨率指南将非常有帮助。
Cheers
干杯
回答by Mindaugas
In Google Chrome, open developer tools by pressing F12, and click on the gear icon to go to Settings -> Overrides, turn on 'User Agent', and select your desired device - with 'Device Matrix' you can customize screen size and more.
在 Google Chrome 中，按 F12 打开开发者工具，然后单击齿轮图标转到设置 -> 覆盖，打开“用户代理”，然后选择所需的设备 - 使用“设备矩阵”，您可以自定义屏幕大小等.
回答by svassr
Check out http://screensiz.es/phone. You can order phones or tablets by screen size, aspect ratio and popularity.
查看http://screensiz.es/phone。您可以按屏幕尺寸、纵横比和受欢迎程度订购手机或平板电脑。
Also check out screencast in chrome canary dev tools. http://www.html5rocks.com/en/tutorials/developertools/mobile/
还可以查看 chrome canary 开发工具中的截屏视频。 http://www.html5rocks.com/en/tutorials/developertools/mobile/
What I am still looking for is something like google's browsersizebut for mobile screen.
我仍在寻找的是类似于google 的浏览器大小，但适用于移动屏幕。
Update:
更新：
Google Labs Browser Size is now part of Google Analytics
谷歌实验室浏览器大小现在是谷歌分析的一部分
For up to date datas check https://design.google.com/devices/(AKA now as https://material.io/tools/devices/)
有关最新数据，请检查https://design.google.com/devices/（现在也称为https://material.io/tools/devices/）
回答by Thilanka De Silva
@media (min-width: 1200px) {
@media（最小宽度：1200px）{
@media (max-width: 980px) {
@media（最大宽度：980px）{
@media (max-width: 979px) {
@media（最大宽度：979px）{
@media (min-width: 980px) {
@media（最小宽度：980px）{
@media (min-width: 768px) and (max-width: 979px){
@media（最小宽度：768px）和（最大宽度：979px）{
@media (max-width: 768px) {
@media（最大宽度：768px）{
@media (max-width: 767px) {
@media（最大宽度：767px）{
@media (max-width: 480px) {
@media（最大宽度：480px）{
Should be the standards
应该是标准
回答by clement g
I think you should definitely try this website : http://responsivetools.com/
我认为你一定要试试这个网站：http: //responsivetools.com/
It will give you a quick idea of how you site looks like for different mobile and tablet resolution.
它将让您快速了解您的网站在不同移动和平板电脑分辨率下的外观。
回答by Karl
Statcounter probably provides the best number crunching on screen sizes and many other stats. Their page always gives me loading problems, so I prefer to find someone that has quoted their stats, than going directly to the source, like this blogger:
Statcounter 可能在屏幕尺寸和许多其他统计数据方面提供了最好的数字处理。他们的页面总是给我带来加载问题，所以我更喜欢找到引用他们统计数据的人，而不是直接访问源，比如这个博主：
Hope that is a more direct answer to your question!
希望这是对您问题的更直接的回答！
回答by Robert Fricke
There are many online services where you can view you site "through" a phone's display, with the resolutions specified.
有许多在线服务，您可以“通过”手机显示屏查看您的站点，并指定分辨率。
For example: mobilephoneemulator
例如：手机模拟器
回答by JavaScript-Codes.com
We'll you might want to try going here: http://cartoonized.net/cellphone-screen-resolution.phpit basically gives you the best resolution depending on types of phones.
我们你可能想尝试去这里：http: //cartoonized.net/cellphone-screen-resolution.php它基本上根据手机类型为您提供最佳分辨率。
回答by Ivijan Stefan Stipi?
This is a list for all known CSS @media property for mobile devices + several desktop resolution that can be used.
这是用于移动设备的所有已知 CSS @media 属性的列表 + 可以使用的几种桌面分辨率。
These include Android, iPhone, iPad, Google Nexus, LG, Samsung, Nokia, HTC, Motorola, Sony and all the famous brands.
其中包括 Android、iPhone、iPad、Google Nexus、LG、三星、诺基亚、HTC、摩托罗拉、索尼和所有知名品牌。
Look on GitHub
在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){
}
