Css @媒体（最大宽度）和移动浏览器

我对这个问题实在无能为力，请指教

我有一个网页，我想优化（与CSS媒体查询）的移动设备。在

中，我有：

<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />

但它什么也没做

2） “哪里会有问题？”我说。因此，我给出了显示

屏幕分辨率的javascript：

<div>
    <script>
    document.write(screen.width + 'x' + screen.height);
    </script>
</div>

文件写入（屏幕宽度+x+屏幕高度）；

但它显示的是“320x425”。这很奇怪，我的手机屏幕宽度是240像素，而不是320像素

3） 没关系。我读过一些关于移动浏览器的文章，这些浏览器可以自动缩放内容，将更多内容显示在一个屏幕上。也许我的手机浏览器缩小了，现在显示的区域是320像素宽。因此，我在

中添加了两行。一个宽240px，第二个宽320px。希望两者都能在移动浏览器中渲染，无需滚动条，并可爬到屏幕：

<hr style="width: 240px;">
<hr style="width: 320px;">

宽度：320px；“>

令我惊讶的是，第一行（240px）爬上了屏幕，第二行（320px）离开了屏幕（80px），出现了水平的scroolbar

因此，长话短说：Javascript认为有320px的宽屏幕可用。CSS认为有320px的宽屏幕可用。但只有240px可以安装到屏幕中。类似的行为也出现在我朋友的iPhone上

请告诉我，我的钱包在哪里？多谢各位

---

另外，测试源代码可以在那里找到：

我认为如果您使用移动优先的方法进行设计，您的一个问题可以得到解决。这意味着设计最小的屏幕尺寸（移动），然后将您的方式向上移动到更大的屏幕

您的css将从最大宽度值转换为最小宽度值，如下所示

@media screen and (min-width: 240px) {
    CSS: here;
}

因此，您在开始时设置的所有基本样式都适用于较小的屏幕尺寸，上面的规则将设置以任何240px或更大屏幕尺寸开始的样式

---

这也将消除使用任何JavaScript的需要，在浏览器嗅探屏幕大小时应尽量避免使用JavaScript。

无论是最小宽度还是最大宽度，CSS都认为我的手机的屏幕宽度为320px，而不是240px。

@media screen and (min-width: 240px) {
    CSS: here;
}