移动WEB开发之viewport
问题:
在codepen上写了一个响应式页面,调试的时候没有问题。结果放到网站上,在手机上打开之后竟然和在电脑中的布局是一样的。
查阅资料之后知道响应式布局应该有这样一句话:<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
这是怎么回事呢?为什么写了width=device-width之后就可以正确的显示为图二那样呢?
Viewport诞生
这件事情要从viewport出现之前开始讲起。
在移动设备还不普及的时候,网页设计根本不考虑手机端的感受,如果用手机设备(屏幕宽度为320px)打开一个定宽(width:980px)的网页,就会出现滚动条,要滑动才能看完整个页面:
这并不是最糟糕的。最糟糕的是,如果是流式布局。也就是一个盒子的宽度是百分比,比如说20%,那么在一个屏幕宽度为320px的手机上打开之后,这个盒子的实际宽度就会是320px*20%=64px。而它里面的以px为单位的文字,依然是那么大。这就会出现一行中只能容下那么几个字的情况,阅读体验是非常差的。
为了解决这个问题,Apple提出了viewport这个概念,他就相当于建立在设备屏幕上的一个单独的视口,用于展示网页内容,让CSS与设备宽度完全脱离关系。也就是说,在CSS中的百分比是由它的宽度来决定的,而不是由设备屏幕的物理宽度。Apple给它一个默认宽度,980px。
这也就是为什么我的响应式网页在手机中打开后和在电脑上的布局相同了,因为我是在viewport中打开它,而viewport的宽度是980px,并没有满足breakpoint,所以不会改变布局。
随着移动端的普及,这个问题就越来越棘手,那些专门为手机设计的网页(宽度为320px),在手机上打开之后却是这样的:
所以需要提供一些属性,来设置viewport的宽度或高度。
<meda name="viewport" width="device-width">
这样,这个网页就可以正确的显示了:
参考:
移动WEB开发之viewport的更多相关文章
- #笔记# 移动前端开发之viewport
一般移动设备的浏览器都默认设置了一个 viewport ,并初始定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.下面我们来认识几个与 viewport ...
- Vim下的Web开发之html,CSS,javascript插件
Vim下的Web开发之html,CSS,javascript插件 HTML 下载HTML.zip 解压HTML.zip,然后将里面的所有文件copy到C:\Program Files\Vim\vi ...
- 移动前端开发之viewport,devicePixelRatio的深入理解
移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...
- Web开发之Tomcat&Servlet
<!doctype html>01 - JavaEE - Tomcat&Servlet figure:first-child { margin-top: -20px; } #wri ...
- 移动web开发之rem适配布局
移动web开发之rem适配布局 方案: 页面布局文字能否随着屏幕大小变化而变化 流式布局和flex布局主要针对于宽度布局,那高度如何布局? 怎样让屏幕发生变化的时候元素高度和宽度等比例缩放? 1. r ...
- html5开发之viewport使用
随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择.然而,每一款手机有不同的分辨率,不同屏幕 ...
- (转)html5开发之viewport使用
原文:http://www.php100.com/html/webkaifa/HTML5/2012/0831/10979.html 随着高端手机(Andriod,Iphone,Ipod,WinPhon ...
- 深入理解移动web开发之PPI,Pixel,DevicePixelRatio(转)
如果你是一个开始接触移动Web开发的前端工程师,那么你或许也遇到了和我曾经遇到的过问题:有太多新的概念需要掌握,太多相似的概念需要区分.没关系,我将用两篇文章的篇幅来解决这些问题.上篇文章关于解释和区 ...
- .NET Web开发之.NET MVC框架
摘要:MVC是一种架构设计模式,该模式主要应用于图形化用户界面(GUI)应用程序.那么什么是MVC?MVC由三部分组成:Model(模型).View(视图)及Controller(控制器). MVC概 ...
随机推荐
- 前端学HTTP之重定向和负载均衡
前面的话 HTTP并不是独自运行在网上的.很多协议都会在HTTP报文的传输过程中对其数据进行管理.HTTP只关心旅程的端点(发送者和接收者),但在包含有镜像服务器.Web代理和缓存的网络世界中,HTT ...
- [C#] C# 知识回顾 - 你真的懂异常(Exception)吗?
你真的懂异常(Exception)吗? 目录 异常介绍 异常的特点 怎样使用异常 处理异常的 try-catch-finally 捕获异常的 Catch 块 释放资源的 Finally 块 一.异常介 ...
- Nested Loops join时显示no join predicate原因分析以及解决办法
本文出处:http://www.cnblogs.com/wy123/p/6238844.html 最近遇到一个存储过程在某些特殊的情况下,效率极其低效, 至于底下到什么程度我现在都没有一个确切的数据, ...
- [转载]Cookie/Session的机制与安全
Cookie和Session是为了在无状态的HTTP协议之上维护会话状态,使得服务器可以知道当前是和哪个客户在打交道.本文来详细讨论Cookie和Session的实现机制,以及其中涉及的安全问题. 因 ...
- 基于SignalR的消息推送与二维码描登录实现
1 概要说明 使用微信扫描登录相信大家都不会陌生吧,二维码与手机结合产生了不同应用场景,基于二维码的应用更是比较广泛.为了满足ios.android客户端与web短信平台的结合,特开发了基于Singl ...
- document.compatMode
在我电脑屏幕上显示的 电脑是 1920*1080这是在document.compatMode:css1Compat模式 window.screen.availWidth 1920 window.scr ...
- Mysql - 函数
Mysql提供的函数是在是太多了, 很多我都见过, 别说用了. 园子里面, 有人弄了一个比较全的. MYSQL函数 我这里会将他写的完全拷贝下来, 中间会插入一些自己项目中使用过的心得 一.数学函数 ...
- InnoDB:Lock & Transaction
InnoDB 是一个支持事务的Engine,要保证事务ACID,必然会用到Lock.就像在Java编程一下,要保证数据的线程安全性,必然会用到Lock.了解Lock,Transaction可以帮助sq ...
- 关于asp.net利用mono部署到Linux上的一些说明
linuxdot.net社区群:102732979(如果你认为你已经在.NET跨平台方面有足够的经验,请参加这个群:103810355). 其中有各种大神,嘿嘿,如果你有问题可以来咨询,完全无偿的免费 ...
- ENode框架Conference案例分析系列之 - 文章索引
ENode框架Conference案例分析系列之 - 业务简介 ENode框架Conference案例分析系列之 - 上下文划分和领域建模 ENode框架Conference案例分析系列之 - 架构设 ...