媒体查询和设备像素比率

本文介绍了媒体查询和设备像素比率的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我正在重新设计我的网站，我决定在响应式布局中拍摄。我是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.样式表应该目标宽度RThe 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-metatagThis 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). 这篇关于媒体查询和设备像素比率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！