Question

我重写了我的网站，以便为移动设备进行格式化。但是，显示宽度在不同设备上不一致。在我的Android设备上，宽度看起来不错，但在另一个人的Android设备上，宽度要小得多，因此不可读。

我在html文件中使用以下视口：

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, user-scalable=no" /

这是我在html页面中的主要部分：

     <div id="maindiv" style="margin-left:1.0em; margin-right:0.5em">

我需要在主div中加一个宽度参数吗？或者任何人都可以告诉我应该做些什么来确保移动设备的均匀体宽？

Answer 1

您需要构建自适应网站。如果您在div上有固定的宽度，则需要使用css media queries。由于IE 8及更早版本不支持媒体查询，因此您可以使用respond.js之类的插件。使用此插件，您只需将其添加到您的页面并使用您通常的媒体查询。

您是否有指向该网站的链接？

媒体查询可用于定位特定的浏览器/设备宽度，因此您只能在浏览器/设备满足媒体查询器规范时设置样式。

但是，如果您将#maindiv width更改为100％或使用max-width，我相信这将解决您的问题。此外，在外部样式表或页面上，您还需要添加以下css以使图像响应：

img {
max-width:100%
height:auto;
display:inline-block;
}

同样删除：

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, user-scalable=no" />

并提出：

<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width, user-scalable=no">