源文章地址:http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design
我相信你肯定用了 viewport meta tag 来做响应式设计,但你是否知道 viewport 标签对非响应式设计业是非常有用的?如果你还从没将你的网站转换成为可响应的,就应该好好看下这篇文章,我会教你怎用用viewport标签提升你的网站对移动设备的响应能力。
一般使用Viewport标签的场景
Viewport meta 标签一般是用来让你的网页宽度和初始比例可以和移动设备相匹配,下面就是个简单的例子:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
使用Viewport标签来做非响应式设计
你可能知道,iPhone的默认视口宽度是980px,但你的网页设计可能无法适应这个范围,然后实际显示效果就是变宽或变窄了。下面我给两个例子教你怎样利用viewport标签来提高非响应式设计在移动设备的表现能力。
例子
看你的iPhone浏览下网址http://themify.me/
左边的截图是网站没有应用viewport标签时的表现效果,如你所见,页面碰到两边边界了。当我添加一个viewport标签来指定视口的宽度为1024px之后,它就会在边缘部分留下一点空隙。
<meta name="viewport" content="width=1024">
另一个例子
如果你的设计太窄,那很可能引起另一个问题。假设你的网页宽度是700px而且不是响应式的,那展示之后就会像下面左边截图那样,右边有个大大的空白区域。
你可以使用viewport简单地修补这个空白,这样你不用修改你的网页宽度,但在iPhone这种宽度为720px的设备里会自动对应比例显示。
<meta name="viewport" content="width=720">
常识错误
人们通常会在非响应式设计中应用initial-scale=1,这是错误的,它会使页面不通过比例扩大或缩小来100%展示。如果你的设计不是响应式的,用户就需要翻动、缩小页面来浏览整个网页。最糟糕的是那些用了user-scalable=no or maximum-scale=1 with initial-scale=1 ,因为这样会使比例缩放功能失效。但缩放功能失效了,用户就没有办法缩小页面来浏览完整的页面。记住:如果你的设计不是响应式的,不要重新设置initial-scale或让缩放功能失效。
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
译者博客:http://blog.csdn.net/wowkk
分享到:
相关推荐
响应式 Web 设计 – Viewport 什么是 Viewport? viewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做”视区”。 手机浏览器是把页面放在一个虚拟的”窗口”(viewport)中,通常这个虚拟的”窗口”...
现在,响应式Web设计无疑是非常流行的。对于新人,responsive design可能听起来有点复杂,但实际...你可以使用viewport这个meta标签来重置这个行为。下面的viewport标签告诉浏览器使用设备宽度(device-width)做为viewp
不过正所谓“萝卜青菜各有所爱”,如果你想要使用Bootstrap开发自己的项目却又恰巧不太喜欢响应式布局(或者你所设计的页面布局不允许你使用响应式技术),那么你可以通过以下方式禁用响应式布局。 移除标签 禁用第...
本文介绍了HTML5响应式(自适应)网页设计的实现,分享给大家,具体如下: 第一步:在网页代码的头部,加入一行viewport元标签 <meta name=viewport content=width=device-width, initial-scale=1 /> ...
随着移动端用户的增加,我们希望设计出来的网页能同时使用PC和移动端设备,同一个网页增对不同的设备显示效果也不一样,这时需要用到响应式设计。这里我先介绍一下流式网格系统。如果了解过 Bootstrap和Foundation...
请求桌面站点 利用“请求桌面站点”在移动浏览器上的工作原理,让它们脱离响应式视口 ##什么? 这是一段简单的代码,它将在移动版 Chrome(Android 和 iOS)...meta name="viewport" content="width=device-width, i
4.3.1根据适口属性设计响应式布局: 26 4.3.2同分辨率范围内的流式布局设计 26 4.3.3移动端viewport属性设定 27 4.3.4组件样式的渐进增强设计 27 4.4 本章小结 27 第五章 认我测在线检测服务系统设计 29 5.1认我测...
BootStrap对开发者来说最大的好处就是响应式布局和一些优秀的样式。 现在我给大家介绍一些使用BootStrap的步骤和一些常用的东西。 1.编写头部 <head> <meta charset="UTF-8"> <!--为了让ie采用...
.container 固定宽度并且具有响应式。 .container-fluid 自由宽度(100%宽度)。 这2个class是直接在body标签下建立一个div标签,class等于这2个中的一个。 然后其他内容全部写在这个div标签中即可! 例如: <!...