智能手机浏览器的分辨率

我只是好奇Android手机如何专门计算响应式网页的分辨率。例如，我知道虽然iPhone 5s的原始分辨率为640x1136，但它用于网页的分辨率为320x568。（所以我可以在需要时相应地测量我的设计元素 - 我通常使用百分比，但有时我需要以像素为单位来测量元素）智能手机浏览器的分辨率

因此，当Android手机访问响应式设计的网站并具有原始分辨率1920x1080，网页上的元素在大小方面呈现的是什么？它也是1/2吗？或者它在设备上有所不同？

的测试中，我所做的就是不给我发生了什么事的一个清晰的思路。

谢谢！

来源

2014-06-20 alanvitek

如果您使用Chrome，您可以使用开发者工具设备仿真器来获得不同设备的分辨率和像素比例。您还可以通过像素密度显示引用此列表：http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density（看在CSS像素比列） –

@SeanHenderson - 这是我不知道的一个极好的资源！这真的解决了CSS在解释这些维度时的神秘感。谢谢 – alanvitek

根据我的经验，大部分的时间，你可以得到你想要的，如果你正确地构建一切，只专注于设备宽度的结果。

设备宽度是在智能电话或平板电脑的像素的真实测量，对于分辨率的数字是典型地用于视网膜设备两倍。

构建正确的意思是：

（1）在您的文档的头部包括你的meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

可选，你可以防止变焦

<meta name="viewport" content="width=device-width, user-scalable=no" />

（2 ）在你的CSS使用媒体查询如

@media (max-width: 480px) { 
    ... 
} 

@media (max-width: 767px) { 
    .... 
} 

@media (min-width: 768px) and (max-width: 979px) { 
    ... 
} 

@media (min-width: 1200px) { 
    ... 
}

您选择的折点并不重要，而是基于像素宽度操纵屏幕显示的原理，而不是像素比率，分辨率，方向和其他相关细节使您的生活复杂化。

可以肯定，你会遇到例外情况，但如果你从简单的开始，它得到你想要的结果，那么你就避免了努力的目标设备的滑坡，又有利于面向未来的设计。

祝你好运！

来源

2014-06-20 18:49:23

我认为当你提到它不应该是关于设备必须的，而是给定像素内的设计环境时，你真的明白了它的意思。事实上，关于设备和解决方案，断点并不重要。谢谢！ – alanvitek

谢谢@alanvitek，我很高兴，这有助于澄清事情给你 –

智能手机浏览器的分辨率

回答

相关问题