非响应式设计的viewport

大家已经非常熟悉 响应式网页设计了吧，但是我们通常会忽略很多旧的没有采用响应式设计的网站，其实这类网站在移动终端的用户体验更为关键——因为它们没有对移动设备做任何优化。

通用viewport

对于响应式网站，大家通常都会这样定义：

1

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

非响应式网站

但是你或许会知道，iPhone（包括android）通常会把网站默认以980px的宽度来渲染，这就是说，如果你没有定义viewport，如果你的网站的宽度大于980或者小于980，iPhone会把它默认以980px的窗口来缩放和渲染，这样就会有各种问题。

比如：

前面图片是没有设置viewport的情况，页面宽度大于980px的部分会被截断，后面的是设置了实际宽度(1024)以后的表现，嗯，只是简单的把页面的viewport设置成实际宽度：

1

<meta name="viewport" content="width=1024">

页面实际宽度过小的时候也会有问题：

容器的宽度是700px，所以会默认留白，而设置了viewport之后，页面就看起来酥服多了：

1

<meta name="viewport" content="width=720"><pre lang="css" line="1">

常见错误

1

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

一个很常见的错误是，很多人常常使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染而不会自动缩放，用户需要手动移动页面或者缩放。 最差的是和initial-scale=1同时使用user-scalable=no或maximum-scale=1，这将使你的网站不能被缩放——用户不能放大/缩小网页来看到全部的内容。所以，请记住：如果你的网站不是响应式的，请不要使用initial-scale或者禁用缩放。