移动web开发viewport记录

现在做的项目要重新写viewport，就研究了一下。本来就对这一块迷迷糊糊的，看了几位大牛的文章就更迷糊了，好歹最后是弄得差不多了，赶紧记录下来。
先来看下viewport是什么意思，字面意思是视图窗口，就是显示页面的地方，如果不设置他的属性，一般咱们在移动设备上看到的网页都比设备本身的大，下面是viewport的属性：

width 可视区域的宽度，为一个正整数，或字符串”width-device”
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 可视区域的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许

iPhone 和 Android 平台上，WebKit 内核的浏览器使用 980 像素宽的视见区或逻辑尺寸，相当于viewport的width=980px。当页面加载后，内容通常被完全缩放以便整个页面都可见，尽管内容会被缩放得非常小，甚至不可读。
iPhone3GS及以上设备的Safari和Android4.0以上的浏览器支持修改viewport的width来改变页面的缩放情况，你可以将width指定为页面设计的宽度，如此一来，你的页面正好充满viewport并全屏显示，而不会缩放。如当页面设计宽度为480px时，可以设置viewport的width=480px：

<meta name=”viewport” content=”width=480px, user-scalable=no” />

因为现在的项目是在320px宽的模板上做出来的，所以放到移动设备上的时候，比较简单的方法就是在320Px的基础上缩放。也就是现在viewport的width的值就是固定的320px。再根据后面scale的值来缩放整个网页，就会得到想要的效果。
按照这个思路走下去，只要获取移动设备屏幕的宽度再除以320就得到scale值了。但是这个想法，在实践的时候却遇到了问题。
获取屏幕宽度的方法是：

window.screen.width

在苹果6s上得到的是375，我们都知道的屏幕的正常宽度，但是在小米3上得到值是1080，这显然不是正常手机的实际屏幕宽度。经过几个安卓手机测试，这个值跟屏幕的实际宽度相差dpr(设备像素比 device pixel ratio)倍。也就是可以得到以下公式：

真实屏幕宽度=window.screen.width/dpr

得到真实屏幕的宽度之后，就可以再除以320得到scale的值了。

以上是针对高分辨率安卓手机的优化。苹果手机相对简单，只要把viewport的width值设置成320，就会自动缩放成合适的大小了。

下面是参考资源：

http://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html#3077467

http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml

http://www.cnblogs.com/2050/p/3877280.html

http://caibaojian.com/js-name.html#t10

http://f2e.souche.com/blog/yi-dong-duan-zi-gua-ying-fang-an/?utm_source=tuicool&utm_medium=referral#clue

http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041

移动web开发viewport记录相关推荐

Java Web 开发从入门到入？
Java Web 开发学习记录一 Web 前端基础标题这是一个知识点 Java Web 开发学习记录一 Web 前端基础前言一.HTML相关介绍二.HTML 1.HTML文件的基本结构 ...
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
移动Web开发基础-Viewport
导语:移动Web开发自然要从Viewport说起,那什么是Viewport呢?字面意思为视图窗口,在移动设备上就是指用来显示页面的那部分区域. 用移动设备来访问没有做特殊处理的PC页面,移动设备是显示 ...
go语言web开发系列之五:gin用zap+file-rotatelogs实现日志记录及按日期切分日志
一,安装需要用到的库: 1,安装zap日志库: liuhongdi@ku:/data/liuhongdi/zaplog$ go get -u go.uber.org/zap 2,安装go-file-r ...
WEB开发零基础到入门之HTML+CSS(学习记录)
序言之前一直想把自己的一个学习记录,以文章形式记录下来,方便于自己后期查找和温故.自己想了想准备建个人博客站来做记录,但是又想到了csdn的大家庭:所以就放弃了用个人站记录的想法,关于这里简单说明下 ...
web开发方面阅读的经典书籍记录
最近在项目中做web开发,翻阅了一下书籍(觉得本本都是经典) 锋利的jquery(我入门js的教程,验证书上每个例子并进行局部修改查看效果) jquery实战(中文版) javascript 基础教程 ...
mobile web开发遇到的问题
移动web开发之道(Android与Iphone) 1.javascript篇 (1)使用querySelector和querySelectorAll这两个方法获取文档对象中DOM节点的引用由于这两 ...
网页开发工具有哪些？——开发者必备的15个Web开发工具
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...

移动web开发viewport记录

移动web开发viewport记录相关推荐

最新文章

热门文章