站易CMS - 让每个人都可以轻松建站!
您现在的位置:首页?>?yabo.net?>?DIV&CSS?>?非响应式设计的viewport

非响应式设计的viewport

来源:互联网 作者:funnyzak 发布时间: 2012-12-08 11:02:26 564人浏览 条评论

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

通用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%宽度渲染而不会自动缩放,用户需要手动移动页面或者缩放。最差的是yabo.net和initial-scale=1同时使用user-scalable=no或maximum-scale=1,这将使你的网站不能被缩放——用户不能放大/缩小yabo.net来看到全部的内容。所以,请记住:如果你的网站不是响应式的,请不要使用initial-scale或者禁用缩放。

0人觉得很赞
0人觉得很烂
正在加载评论,请稍等...
验证码:
?