适用于高分辨率和小屏幕手机的响应式设计答案

【问题标题】：Responsive Design for mobiles with high resolution & small screen适用于高分辨率和小屏幕手机的响应式设计
【发布时间】：2015-06-07 17:46:57
【问题描述】：

大家好，我在 CSS 中使用@media only screen 和 (max-width: 320px)（320 不是唯一使用的）来为移动设备分配不同的样式。但是，当我实际在手机上查看同一个网站时，我发现它很麻烦。在我的桌面 PC 响应式预览中在 Firefox 中预览时，它看起来像这样：

但是当我在手机上查看时，它看起来像这样：

我了解手机的分辨率高于 320（适用于两个预览屏幕）。我如何达到我想要的结果？（图一）

另一个问题是，在手机上使用 vw 和 vh 单位是否安全？

【问题讨论】：

我的一般回答是：“尽可能不要尝试比您必须更具体地图形化。”尽管手机对您的标记的解释表面上看起来与 Firefox“完全不同”，但唯一实际的区别是图标的大小。（例如，右边距上的水平箭头恰好位于“树根的亮点”。）你的标记是“视觉上的，完全一样的”，然后你就结束了“微观管理”。让设备有发言权..
您在测试什么手机...？...因为在您的查询中使用“only”可能是您问题的根本原因...请参阅：stackoverflow.com/questions/8549529/…
在回答您的其他问题时，我个人经常使用视口缩放，但请注意：github.com/scottjehl/Device-Bugs/issues/36
好像可以解决问题，谁能提供更多信息？
@MikeRobinson 说所有不同的东西都是用像素定义的（比如图标），所有正确的东西（比如那个箭头位置）都是用 % 定义的。但是在这种情况下，当这些图标太小时，很难按下它们（它们可能比第二张图片还要小），而且第二张图片本身的图标非常小，很难使用。深入到网站还有许多其他由此引起的问题。有什么建议如何控制基于像素的尺寸？

标签： css responsive-design

【解决方案1】：

再次回答我自己的问题；

  <meta name="HandheldFriendly" content="true">
  <meta name="viewport" content="width=device-width, initial-scale=0.666667, maximum-scale=0.666667, user-scalable=0">
  <meta name="viewport" content="width=device-width">

这解决了问题。

【讨论】：