响应式,viewport
您的位置: 主页 > web前端文章 > css >

viewport用于非响应式设计的视口元标记【访问量:65】

我相信你们都使用视口meta标签来进行响应式设计,但是你是否知道viewport标签对于非响应式设计也是非常有用的?如果您还没有时间将设计转换为响应式,那么您应阅读本文,了解如何使用视口标签改善移动设备上设计的外观。

一般使用视口标签 视口元标记通常用于响应式设计,以在移动设备上设置视口宽度和初始比例。以下是一个示例视口标签。

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

对无响应设计使用视口标签如您所知,iPhone上的默认视口宽度为980像素。但是你的设计可能不适合这个范围。它可以更宽或更窄。下面是两个示例,您可以利用视口标签改善移动设备上无响应设计的渲染。 例  看看你的iPhone 上:

themify-example.jpg

左侧的屏幕截图显示了该网站如何在没有视口标记的情况下进行渲染。正如你所看到的,页面在双方都触摸。我添加了视口标签来指定视口宽度为1024px,因此它在左侧和右侧留下了一些空白空间。

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

另一个例子如果你的设计太狭窄,也可能导致问题。假设你的设计的容器宽度是700px,并且它没有响应,它看起来就像左边的屏幕截图,右边有一个很大的空白区域。

smaller-viewport-width.png

您可以通过将视口宽度设置为720px来简单地解决此问题。您的设计宽度不会改变,但iPhone会将其缩放到720px。

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

常见的错误一个常见的错误是人们往往对无响应设计应用initial-scale = 1。这将使页面呈现100%而不缩放。如果您的设计没有响应,用户将不得不平移或缩小以查看整个页面。最糟糕的情况是将用户可扩展=否或最大规模= 1与初始规模= 1相结合。这将禁用您网站的缩放和缩放功能。在缩放禁用的情况下,用户无法缩小以查看整个页面。请记住:如果您的设计无法响应,请不要重置初始缩放或禁用缩放!

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

misusing-viewport.jpg

2018-04-04
匿名评论