HTML5实践-在非响应式设计中如何使用ViewPort meta标签的方法介绍

 　　大家都知道viewport标签对于响应式设计的意义，但是你们可能不清楚，他对于非响应式设计也有相当的作用。如果你的站点还是非响应式的，那么通过本文你将学会，如何使用viewport标签增强你站点在mobile设备上的显示效果。

　　Viewport标签的一般使用

　　Viewport meta标签一般用在响应式设计中，用来设计mobile设备viewport的宽度和initial-scale。

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

　　在非响应式设计中使用Viewport

　　大家都知道，iphone默认的viewport宽度是980px。但是你的设计可能不符合这个范围，有时候宽点，有时候窄点。下面两个例子将向你展示，在什么情况下可以使用viewport标签来增强在mobile设备上非响应式设计中的展示效果。

　　例子

　　在iphone查看 Themify 站点。

立即学习“前端免费学习笔记（深入）”；

　　截屏左边的图片展示了，站点在没有使用viewport标签时的效果，我们可以看到页面抵到了屏幕的边缘。截屏右边的图片是我添加了viewport标签后的效果，我将viewport的宽度设置为1024，这时的页面和手机屏幕在左右都将保持一定的距离。

慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

120

查看详情

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

　　另外一个例子

　　如果你设计的太窄，也会出现问题。假设你的设计时非响应式的，容器宽度是700px，这时的效果就像截屏左侧的图片，将会在手机屏幕右侧产生一个很大的空隙。

　　我们可以通过简单的添加一个720px宽度的viewport，来修复这个问题。我们没有对你的设计进行改变，但是iphone会做出调整，来适应你的720px宽度。

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

　　通常的错误

　　一个通常的错误是，人们会为非响应式设计设置 initial-scale=1 参数。这样页面将会以100%的比例展示，不会进行比例的调整。这样人们就不得不移动页面或者执行缩小的操作，来查看整个页面。最糟糕的情况是，人们把 user-scalable=no 或者 maximum-scale=1 结合 initial-scale=1一起使用。这会禁用站点的缩放的功能，用户将不可能通过这种方式查看到整个页面。所以你一定要记住，如果你的站点不是响应式设计的，那么就不要这么设置！

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

以上就是HTML5实践-在非响应式设计中如何使用ViewPort meta标签的方法介绍的详细内容，更多请关注php中文网其它相关文章！