媒体查询和设备像素比率 [英] Media queries and device pixel ratio

问题描述

我正在重新设计我的网站，我决定在响应式布局中拍摄。我是CSS3媒体查询的新手，无法弄清楚如何使网站在智能手机上的行为。

I'm in the process of redesigning my website and I've decided to take a shot at responsive layout. I'm new to CSS3 media queries and can't figure out how to make the site behave as intended on my smartphone.

页面目前有这个视口元标记：

The page has currently this viewport meta tag:

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

我不知道它是什么，因为我没有看到有在我的HTML中有这个，但被告知这是有用的。

I'm not sure what it does, as I don't see a difference between having and not having this in my HTML, but was told that it was somehow useful.

样式表应该目标宽度R < 640px，640px< = R< 960px和960px< = R.布局将分别为320px，640px和960px宽。

The style sheets are supposed to target widths R < 640px, 640px <= R < 960px and 960px <= R. The layout will, respectively, be 320px, 640px and 960px wide.

我面对的问题是与我的智能手机所有现代高像素密度手持设备）。我的智能手机的物理分辨率为480x800像素，但在横向模式下，报告的宽度为533像素（像素比为1.5和800 / 1.5 = 533.33，所以我想这是预期的值）。由于533& 640，显示的布局是最窄的一个：320px。我知道媒体一个看起来不错的智能手机，并喜欢使用它。我应该怎么做，使智能手机以横向模式显示640像素的布局，而不会破坏适用于桌面浏览器的1：1像素比率的当前规则。

The issue I'm facing is with my smartphone (and possibly all modern high pixel density handheld devices). My smartphone has a physical resolution of 480x800px, but in landscape mode, reports the width of 533px (its pixel ratio is 1.5 and 800/1.5 = 533.33, so I guess this is the expected value). Since 533 < 640, the displayed layout is the narrowest one: 320px. I know the medium one looks good on the smartphone and would prefer to use that. What should I do to make the smartphone display the 640px layout in landscape mode without breaking the current rules that work for desktop browsers with 1:1 pixel ratio?

当前媒体（分别为320,640,960）的查询是：

The current media queries for each layout (320, 640, 960, respectively) are:

@media only screen and (max-width: 639px)

@media only screen and (min-width: 640px) and (max-width: 959px)

@media only screen and (min-width: 960px)

推荐答案

这个问题/答案可能会帮助你：有任何等同于Android的< meta name =' viewport'content ='target-densitydpi = device-dpi'>适用于iPhone上的Safari？，这反过来又指向这篇非常有用的文章： http：// davidbcalhoun .com / 2010 / viewport-metatag

This question/answer may help you: Is there any equivalent to Android's <meta name='viewport' content='target-densitydpi=device-dpi'> for Safari on the iPhone? which in turn points to this very useful article: http://davidbcalhoun.com/2010/viewport-metatag

<meta name="viewport" content="target-densitydpi=device-dpi" />

应该让你知道这似乎是一个适合Android的解决方案，但可能不适用于iOS设备（没有Mac或iPhone手机确认）。

Should make you aware that this seems to be a suitable solution for Android, but maybe not work on iOS devices (don't have a Mac or an iPhone to hand to confirm).

这篇关于媒体查询和设备像素比率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！