具有高分辨率和高分辨率的移动设备的响应式设计小屏幕

Question

你好我们在CSS中使用@media only屏幕和（max-width：320px）（320不是唯一使用的）来为移动设备分配不同的样式。但是当我在手机上检查同一个网站时，我觉得很麻烦。在我的桌面PC响应预览中在Firefox中预览时，它看起来像这样：

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

据我所知，手机的分辨率高于320（适用于两个预览屏幕）。我如何达到我想要的结果？ （图1）

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

Answer 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">

这解决了问题。