android - 调整移动设备的宽度

Question

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

我在我的 html 文件中使用以下视口(viewport):

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

这是我在 html 页面中的主要 div:

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

我需要在我的主 div 中放置一个宽度参数吗？或者谁能​​告诉我应该怎么做才能确保移动设备的主体宽度统一？

Answer 1

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

您有该网站的链接吗？

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

但是，如果您将#maindiv 宽度更改为 100% 或使用最大宽度，我相信这会解决您的问题。同样在外部样式表或页面上，您需要添加以下 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">