非响应式设计的viewport

标签: CSS Tips 响应式 响应式设计 | 发表时间:2012-10-17 13:09 | 作者:神飞
出处:http://www.qianduan.net
整理自: Viewport Meta Tag For Non-Responsive Design
中文原文: 非响应式设计的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或者禁用缩放。

相关 [响应式 设计 viewport] 推荐:

非响应式设计的viewport

- - 前端观察
整理自: Viewport Meta Tag For Non-Responsive Design. 中文原文: 非响应式设计的viewport. 请尊重版权,转载请注明来源,多谢~~. 大家已经非常熟悉 响应式网页设计了吧,但是我们通常会忽略很多旧的没有采用响应式设计的网站,其实这类网站在移动终端的用户体验更为关键——因为它们没有对移动设备做任何优化.

响应式网页设计

- - 前端观察
这个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下. 上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以 先看下这个PPT. 在说到这个话题前,我们先看下网页设计和前端开发的现状:. 全球有超过53亿手机用户(包括传统手机).

响应式Web设计

- - 葵中剑's Blog - SwordAir.com
响应式Web设计( Responsive Web Design – RWD)一般是指那些使用CSS3 Media Query特性制作站点,其可以适应不同视窗尺寸的布局. 虽然很早就已经有了类似RWD的概念,但直到最近一年里才开始变得特别流行,各种文章、例子、工具、模板,不断地从无到有,诸如:. 响应式Web设计50个例子和最佳实践.

响应式网页设计

- - IT技术博客大学习
响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案. Web设计应该做到根据不同设备环境自动响应及调整. 当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式;我们应当向下兼容、移动优先.

响应式Web设计

- - 阿里巴巴(中国站)用户体验设计部博客
在设计中经常遇到这几个问题:. 1.想要网站兼容手机、平板电脑、pc,就得为不同的设备定制不同的版本. 2.想要网站的某些页面在宽屏显示器下一行显示更多的内容,又得为宽屏定制一个版本. 3.很多人并不是在全屏的情况下浏览我们的页面,如果让页面随着浏览器宽度改变而相应的调整会不会比较好. 有没有办法能有效解决这些问题呢.

漫谈响应式设计

- - 新浪UED
学究一些,首先大家先了解一下响应,然后再讲一下设计,响应就是我发出的请求能得到什么样子的回复,比如我说“你好”,你会很容易的给我回复“你好”,因为大家都是中国人,如果我说“hello”,我们这代人如果上过初中,他也会给我说“Hello”,但是如果我给对你说“Bonjour”,那可能只有高配的人才可能知道了.

淘宝响应式WebUI设计实践

- - Taobao UED Team
感谢贷岩的邀请,我在本期奶茶会上做了“响应式设计实践”的分享,是接着上一次的话题进一步讨论“如何实现”. 响应式Web设计(Responsive Web design)是当下比较流行的话题,什么是响应式设计. 简单讲,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整.

Screenqueri.es:响应式设计测试工具

- - 我爱水煮鱼
当你创建一个响应式的布局的时候,在绝大部分流行的分辨率的设备上进行测试是非常重要的,这可以让你决定页面上的每块是否现实或者优化它们的显示方式. 今天给大家介绍的 Screenqueri.es 就是一个免费的基于 Web 的响应式设计的测试工具,它能够让你输入一个网址,然后选择移动或者平板设备,然后对你的网站在各个分辨率下进行测试.

响应式设计简易指南

- - Jing
我们想让我们的网站通过响应用户的行为、设备的屏幕大小和屏幕方向,从而在所有设备上都能用. 截止2013年,有成千上万种不同的设备在浏览网页,所以我们不可能设计出适应所有屏幕大小的网页. 相反,我们必须得采用一种更加流畅的方式去设计. 最近一个比较火的词叫移动优先. 它的意思是,先为移动端设计样式,然后再根据需求去优化更大屏幕的样式.

响应式网页设计示例

- - CSDN博客推荐文章
若要全方位测试你自己或别人的响应式网站,则需要针对每一种设备和不同的屏幕尺寸,分别准备不同的测试系统. 尽管这是最完美的办法,但通过改变浏览器窗口大小其实就可以完成大多数测试. 除此之外,还有很多第三方插件和浏览器扩展可供选择,通过它们可以将当前浏览器窗口或视口设定为指定像素. 必要时,还可以自动将当前浏览器窗口或视口切换成为默认大小(如1024×768像素).