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 本篇文章将讲 ...
随机推荐
- MySQL详解--锁
http://blog.csdn.net/xifeijian/article/details/20313977 2014-03-06 23:45 66484人阅读 评论(17) 收藏 举报 分类: ...
- sql查询删除重复数据
数据库UserInfo 删除重复数据 即删除重复的用户名手机号 同一个用户名手机号只保留一个用户 01.根据多个字段查询重复数据 with data1 as( select MobilePhone,N ...
- 《转载》使用org.w3c.dom.Element的setTextContent()、getTextContent()方法时出现编译错误
今天在更新项目后进行编译时,出现如下错误一堆: 编译错误 Google之,在stackoverflow上看到如下的解决方法: I came here with the same problem. Ev ...
- HttpClient (POST GET PUT)请求
HttpClient (POST GET PUT)请求 package com.curender.web.server.http; import java.io.IOException; import ...
- IDEA 配置 tomcat的数据源
1.F4打开module setting面板,找到facets 配置项,这个配置项非常重要,里面可配置tomcat加载的web.xml和context.xml文件所在的路径,部署的时候IDEA会自动读 ...
- 第20讲 HOOK和数据库编程
1,安装钩子过程可以通过SetWindowsHookEx函数来完成 2,得到当前线程ID,可以用GetCurrentThreadId 3,移除钩子可以用UnhookWindowsHookEx函数 4, ...
- linux的安装
在CentOS 7中提供了两种桌面"GNOME DESKTOP" 和 "KDE Plasa Workspaces",我们以安装"GNOME DESKT ...
- BFS_Maze_求解迷宫最短路径
/* 10 10 #.######.# ......#..# .#.##.##.# .#........ ##.##.#### ....#....# .#######.# ....#..... .## ...
- 从源代码剖析Mahout推荐引擎
转载自:http://blog.fens.me/mahout-recommend-engine/ Hadoop家族系列文章,主要介绍Hadoop家族产品,常用的项目包括Hadoop, Hive, Pi ...
- 良心版Dolby Home Theater v4.1安装教程
感(pi)谢(pan)一下两个教程: 文库文章链接:http://wenku.baidu.com/link?url=beBg_apvCuY3xiCXk4zl65Q7AmeCjoDGMol03K0xhk ...