jmobile学习之路 ---- 视口
当我们的浏览器在窗口最大化的时候,此时屏幕的宽度,就是我们桌面的分辨率。这个规则仅仅适用于PC!
我们试图在iPhone中输出屏幕宽度,你会发现屏幕宽度是980!居然和PC屏幕差不多大!
苹果主导的这些手机厂商,为了使用户获得完整web体验(就是让用户在手机屏幕上,也能够看见完整的PC网页),
就大部分设备都会欺骗浏览器返回一个数值较大的“视口”(viewport),告诉浏览器,别以为我身子小,
但是我想以980px宽度来显示这个页面。
iPhone的分辨率1136*640,三星Note3的分辨率1920*1080。但是分辨率和视口没有关系。他们的视口都是980px。
也就是说说,一个width值为980px的盒子,能够在这样的手机中撑满整个页面,并且恰好不出现横向滚动条。
视口对于我们实现响应式是很不方便的。980太大了,不符合我们心中的期待。
我们心中认为手机屏幕尺寸应该小300~400之间。
约束视口。
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
name="viewport" id="viewport" />
一个id和name为viewport 的meta元标记,就表示现在要约束视口了。具体约束规则,写在content中,每个约束规则,用逗号隔开。
width=device-width → 命令视口的宽度,变为设备的宽(以1024*768屏幕为标准。iPhone等手机通常为320~380之间不等)
user-scalable=no → 不允许用户缩放页面
加上了meta视口约束标记之后,iPhone的视口宽度就是320px。
所有的手机响应式界面,都要记得加上meta viewport视口约束标记!!!
jmobile学习之路 ---- 视口的更多相关文章
- jmobile学习之路 ----检测屏幕宽度
<script type="text/javascript"> window.onresize = function(){ var myh1 = document.ge ...
- jmobile学习之路 ----设备检测
用一个库,device.js.这是一种最简单的方法.device.js库,不依赖jQuery框架. <!doctype html> <html lang="en" ...
- OpenGL学习之路(五)
1 引子 不知不觉我们已经进入到读书笔记(五)了,我们先对前四次读书笔记做一个总结.前四次读书笔记主要是学习了如何使用OpenGL来绘制几何图形(包括二维几何体和三维几何体),并学习了平移.旋转.缩放 ...
- Qt 学习之路 2(30):Graphics View Framework
Qt 学习之路 2(30):Graphics View Framework 豆子 2012年12月11日 Qt 学习之路 2 27条评论 Graphics View 提供了一种接口,用于管理大量自定义 ...
- Qt 学习之路 2(28):坐标系统
Qt 学习之路 2(28):坐标系统 豆子 2012年11月25日 Qt 学习之路 2 59条评论 在经历过实际操作,以及前面一节中我们见到的那个translate()函数之后,我们可以详细了解下 Q ...
- jQuery学习之路(1)-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
- Android开发学习之路-RecyclerView滑动删除和拖动排序
Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开 ...
- RPC远程过程调用学习之路(一):用最原始代码还原PRC框架
RPC: Remote Procedure Call 远程过程调用,即业务的具体实现不是在自己系统中,需要从其他系统中进行调用实现,所以在系统间进行数据交互时经常使用. rpc的实现方式有很多,可以通 ...
- webService学习之路(三):springMVC集成CXF后调用已知的wsdl接口
webService学习之路一:讲解了通过传统方式怎么发布及调用webservice webService学习之路二:讲解了SpringMVC和CXF的集成及快速发布webservice 本篇文章将讲 ...
随机推荐
- angularJS select
ng-options指令 在angularJS中创建select下拉是使用ng-options创建下拉项 ng-options="val as label for element in ar ...
- filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
很多时候需要将图片显示在网页上,一般都会这样做,如下: <img src="xxx.jpg"/> 是的,这样是可以做到,但是如果我要将本地的图片显示到页面上呢?你可能会 ...
- POJ 2226二分图最大匹配
匈牙利算法是由匈牙利数学家Edmonds于1965年提出,因而得名.匈牙利算法是基于Hall定理中充分性证明的思想,它是二部图匹配最常见的算法,该算法的核心就是寻找增广路径,它是一种用增广路径求二分图 ...
- 【JSTREE】 复选框默认选中【总结】
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- CornerStone的使用
俗话说:"工欲善其事必先利其器": 对于我们程序员来说,不管你是大神,还是小鱼小虾,进入公司之后,都用过源码管理工具,不然你就不是一个合格的程序员,现在各个公司用于源码管理工具通常 ...
- SqlPlus中退格键和方向键的设置
参见:http://www.cnblogs.com/wjx515/p/3717986.html http://blog.csdn.net/jacky0922/article/details/765 ...
- GridBagConstraints 参数解释
GridBagConstraints 的具体参考为: http://download.oracle.com/technetwork/java/javase/6/docs/zh/api/java/awt ...
- 安装两个tomcat
编辑环境变量:vi /etc/profile 加入以下代码(tomcat路径要配置自己实际的tomcat安装目录) ##########first tomcat########### CATALINA ...
- jQuery- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法, ...
- PHP RSA参数签名
为了防止在支付通信过程中的参数数据被篡改或者伪造,采用RSA进行数据签名和验证签名. RSA算法是一种非对称密码算法,所谓非对称,就是指该算法需要一对密钥,使用其中一个加密,则需要用另一个才能解密. ...