电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 响应式Web设计：使用HTML5和CSS3实践（4） [打印本页]

作者: look_w 时间: 2019-2-18 19:05 标题: 响应式Web设计：使用HTML5和CSS3实践（4）

3. 阻止移动浏览器自动调整大小

IOS和Android的浏览器都是基于WebKit核心，这两种浏览器以及其他很多浏览器都支持用viewport meta来覆盖默认的画布缩放设置。

下面是一个将画布大小放大到实际尺寸两倍的示例：

<meta name="viewport" content="initial-scale=2.0,width=device-width, maximum-scale=3, minimum-scale= 0.5" />

在模拟器中加载该页面可以看到如下效果，夸张的效果已经说明了问题。initial-scale=2.0的意思是将页面放大n(n=2.0)倍。device-width同时告诉浏览器宽度应该等于设备宽度。maximum-scale和minimum-scale还可以用来控制页面的可缩放范围。
134602-5c3a8fa43619cdce.png
6_scale

你甚至可以禁止用户缩放，不过因为缩放是一个很重要的辅助功能，在实践中很少使用。

meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

下面是我们最终使用的meta标签。

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

关于initial-scale要特别说明下，width=device-width设置以后浏览器的宽度跟媒体视口一致，经过了initial-scale=1.0的设定以后，呈现的内容大小就是设定的原始内容大小，而不要浏览器替你收缩（这是我们进行包含了移动端响应式设计的前置条件）。

抛出另一个问题，在模拟器中当我们设置initial-scale2.0的时候，inspect element内容区域比如#header大小仍旧是960px，为什么不是960*2。只需要假定我们使用了一个类放大镜的之类的东西导致看到的内容变大了。
4. 针对不同的视口宽度修正设计

我们首先为竖屏的iPad3/4增加媒体查询，同样因为Chrome模拟器不支持竖屏设置，我们就手动设置好了。如下为模拟器设置和没有进行媒体查询的效果。
134602-c499986fcafeda3b.png
7_scaleAdjust

然后我们可以增加媒体查询和样式设置，可以看看效果。

@media screen and (max-width: 768px) {

      #wrapper {
         width: 768px;
      }
      #header, #footer, #navigation {
         width: 748px;
      }
}

134602-9cc68d42bf4bbabf.png
8_scaleAdjust2

显示还是有一些问题，我们可以继续优化，如下应用以后sidebar和content都填满了宽度。

   @media screen and (max-width: 768px) {
         #wrapper {
            width: 768px;
         }
         #header,#footer,#navigation {
            width: 748px;
         }
         #content,#sidebar {
            padding-right: 10px;
            padding-left: 10px;
            width: 728px;
      }
}

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)