当我们的浏览器在窗口最大化的时候,此时屏幕的宽度,就是我们桌面的分辨率。这个规则仅仅适用于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学习之路 ---- 视口的更多相关文章

  1. jmobile学习之路 ----检测屏幕宽度

    <script type="text/javascript"> window.onresize = function(){ var myh1 = document.ge ...

  2. jmobile学习之路 ----设备检测

    用一个库,device.js.这是一种最简单的方法.device.js库,不依赖jQuery框架. <!doctype html> <html lang="en" ...

  3. OpenGL学习之路(五)

    1 引子 不知不觉我们已经进入到读书笔记(五)了,我们先对前四次读书笔记做一个总结.前四次读书笔记主要是学习了如何使用OpenGL来绘制几何图形(包括二维几何体和三维几何体),并学习了平移.旋转.缩放 ...

  4. Qt 学习之路 2(30):Graphics View Framework

    Qt 学习之路 2(30):Graphics View Framework 豆子 2012年12月11日 Qt 学习之路 2 27条评论 Graphics View 提供了一种接口,用于管理大量自定义 ...

  5. Qt 学习之路 2(28):坐标系统

    Qt 学习之路 2(28):坐标系统 豆子 2012年11月25日 Qt 学习之路 2 59条评论 在经历过实际操作,以及前面一节中我们见到的那个translate()函数之后,我们可以详细了解下 Q ...

  6. jQuery学习之路(1)-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  7. Android开发学习之路-RecyclerView滑动删除和拖动排序

    Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开 ...

  8. RPC远程过程调用学习之路(一):用最原始代码还原PRC框架

    RPC: Remote Procedure Call 远程过程调用,即业务的具体实现不是在自己系统中,需要从其他系统中进行调用实现,所以在系统间进行数据交互时经常使用. rpc的实现方式有很多,可以通 ...

  9. webService学习之路(三):springMVC集成CXF后调用已知的wsdl接口

    webService学习之路一:讲解了通过传统方式怎么发布及调用webservice webService学习之路二:讲解了SpringMVC和CXF的集成及快速发布webservice 本篇文章将讲 ...

随机推荐

  1. MySQL详解--锁

    http://blog.csdn.net/xifeijian/article/details/20313977 2014-03-06 23:45 66484人阅读 评论(17) 收藏 举报  分类: ...

  2. sql查询删除重复数据

    数据库UserInfo 删除重复数据 即删除重复的用户名手机号 同一个用户名手机号只保留一个用户 01.根据多个字段查询重复数据 with data1 as( select MobilePhone,N ...

  3. 《转载》使用org.w3c.dom.Element的setTextContent()、getTextContent()方法时出现编译错误

    今天在更新项目后进行编译时,出现如下错误一堆: 编译错误 Google之,在stackoverflow上看到如下的解决方法: I came here with the same problem. Ev ...

  4. HttpClient (POST GET PUT)请求

    HttpClient (POST GET PUT)请求 package com.curender.web.server.http; import java.io.IOException; import ...

  5. IDEA 配置 tomcat的数据源

    1.F4打开module setting面板,找到facets 配置项,这个配置项非常重要,里面可配置tomcat加载的web.xml和context.xml文件所在的路径,部署的时候IDEA会自动读 ...

  6. 第20讲 HOOK和数据库编程

    1,安装钩子过程可以通过SetWindowsHookEx函数来完成 2,得到当前线程ID,可以用GetCurrentThreadId 3,移除钩子可以用UnhookWindowsHookEx函数 4, ...

  7. linux的安装

    在CentOS 7中提供了两种桌面"GNOME DESKTOP" 和 "KDE Plasa Workspaces",我们以安装"GNOME DESKT ...

  8. BFS_Maze_求解迷宫最短路径

    /* 10 10 #.######.# ......#..# .#.##.##.# .#........ ##.##.#### ....#....# .#######.# ....#..... .## ...

  9. 从源代码剖析Mahout推荐引擎

    转载自:http://blog.fens.me/mahout-recommend-engine/ Hadoop家族系列文章,主要介绍Hadoop家族产品,常用的项目包括Hadoop, Hive, Pi ...

  10. 良心版Dolby Home Theater v4.1安装教程

    感(pi)谢(pan)一下两个教程: 文库文章链接:http://wenku.baidu.com/link?url=beBg_apvCuY3xiCXk4zl65Q7AmeCjoDGMol03K0xhk ...