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 本篇文章将讲 ...
随机推荐
- Spring MVC返回Map格式JSON数据
问题描述: ajax中走error : function(e) {} 问题背景: 在测试controller层时,试过了ResponseEntity<ResponseModel>这种类型返 ...
- httpie 取代 curl
接口测试有人喜欢postman(for windows or mac) 如果长期用linux工作,可能更喜欢命令的方式,比如curl最近深入了解了下django-rest-framwork,他们推荐了 ...
- inq to datatable group by 多列 实现
using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.T ...
- c++单链表基本功能
head_LinkNode.h /*单链表类的头文件*/#include<assert.h>#include"compare.h"typedef int status; ...
- item2快捷键
整理使用 iTerm 2 过程中得常用快捷键,Mac 原来自带的终端工具 Terminal 不好用是出了名的,虽然最近几个版本苹果稍微做了些优化,功能上,可用性方面增强不少,无奈有个更好用的 Iter ...
- C# IEnumberable & IQueryable 区别
转自 http://blog.csdn.net/daimeisi123/article/details/46976093 在应用到IEnumberable 和IQueryable两个接口时,代码往往很 ...
- mysqlDBA(1-3年)
1.熟悉Aliyun操作系统的管理.配置和系统调优: 2.熟悉mysql管理 3.熟悉mysql主从复制,主主复制 4.熟悉数据库的备份策略,监控策略,性能测量策略 5.熟悉linux/unix操作系 ...
- 用友U8 归纳采购退货结算三种情况
对应版本: 8.52 问题现象: 客户经常处理退货结算的问题 问题原因: 应系统掌握各种情况 解决方案: 结算前全额退货即已录入采购入库单,但未进行采购结算,并且全额退货.填制一张全额数量的红字采购入 ...
- context:component-scan标签的use-default-filters属性的作用以及原理分析
一.背景 我们在Spring+SpringMVC+Mybatis的集成开发中,经常会遇到事务配置不起作用等问题,那么本文就来分析下出现这种问题可能的原因以及解决方式. 二.分析及原理窥探 1.项目结构 ...
- 关于StringBuffer和StringBuilder
StringBuffer 字符串特点:字符串是常量:它们的值在创建之后不能更改. 字符串的内容一旦发生了变化,那么马上会创建一个新 的对象. 注意: 字符串的内容不适宜频繁修改,因为一旦修改马上就会创 ...