智能手机浏览器解决方案 [英] Resolution of smartphone browsers

问题描述

我只是好奇，怎么Android手机具体计算响应网页的分辨率。例如，我知道，虽然一个iPhone 5S拥有640x1136的原始分辨率，它采用了分辨率为网页320x568。 （这样我就可以在需要时据此衡量我的设计元素 - 我通常使用百分比，但有时我需要衡量以像素为单位的元素）

I'm just curious how Android phones specifically calculate the resolution of responsive web pages. For example, I know that while an iPhone 5s has a native resolution of 640x1136, the resolution it uses for webpages is 320x568. (So I can measure the elements of my design accordingly when needed - I typically use percentages, but sometimes I need to measure elements in pixels)

所以，当Android手机访问一个响应设计的网站，并拥有1920×1080的原始分辨率，什么是网页上的元素在规模上被渲染成？是不是也1/2？或者是设备之间的不同？

So, when an Android phone visits a responsively designed website, and has a native resolution of 1920x1080, what are the elements on the web page being rendered as in terms of size? Is it also 1/2? Or is it different between devices?

我已经做了测试没有给我发生了什么事的一个清晰的思路。

The testing I've done isn't giving me a clear idea of what's happening.

谢谢！

推荐答案

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

In my experience, most of the time you can get the results you want if you structure everything correctly and just focus on device width.

设备宽度是在智能手机或平板电脑的像素的真实测量，分辨率数字主要是用来对视网膜设备的两倍。

Device width is a true measure of the pixels on the smartphone or tablet, figures for resolution are typically double for retina devices.

构建正确的意思是：

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

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

可选，你可以prevent与缩放

optionally you could prevent zooming with

<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) {
  ...
}  

您选择的破发点都没有那么重要，而是，你是基于像素的宽度，而不是你的人生复杂化与像素比例，分辨率，方向和其他相关细节操纵屏幕上显示的prinicple。

The break points you choose aren't so important but rather the prinicple that you are manipulating the on-screen display based on pixel widths and not complicating your life with pixel ratios, resolution, orientation and other related details.

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

For sure you will encounter exceptions but if you start simple and it gets the results you want, then you avoid the slippery slope of trying to target devices, and it helps future-proof your design.

祝你好运！

这篇关于智能手机浏览器解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！