文档章节

跨终端的viewport

sHarenZ
 sHarenZ
发布于 2015/03/26 21:01
字数 1626
阅读 29
收藏 0
点赞 0
评论 0

这两天看到了一篇关于详解viewport的文章——《viewport双城记》

原文链接:http://www.quirksmode.org/mobile/viewports.html 

学到了很多东西,下面来总结下:

  1. 像素

    我认为像素大体分为两类(无论是pc还是移动端):设备像素(物理像素)和CSS像素(与设备像素存在一定的映射转化关系)


                

    如上两图所示,浅蓝色代表css像素,深蓝色代表设备像素。当界面缩放时设备像素并不会改变,但css像素就会改变,使一个设备像素块上拥有更多CSS像素

  2. PC上获取可用的像素

    在我们做网页设计的时候,往往并不关心设备的像素有多大,而是有多少CSS像素提供显示

screen.width/height

        含义:用户的屏幕的完整大小 度量:设备的pixels

        兼容性问题:IE8里,不管使用IE7模式还是IE8模式,都以CSSpixels来度量 



window.innerWidth/Height

        含义:包含滚动条尺寸的浏览器完整尺寸 度量:CSSpixels 

        兼容性问题:IE不支持,Opera用设备pixels来度量 

        

        


document.documentElement.clientWidth/Height

        含义:获取viewport的尺寸(不包含滚动条)

        度量:css的pixels

        兼容性问题:无       

        


document. documentElement. offsetWidth/Height

        含义:<html>的尺寸
        度量:
CSSpixels兼容性问题:IE用这个值标示viewport的尺寸而非<html> 

    



3. 移动设备的像素

两种viewport

  • 虚拟的viewport :visualviewport 

  • 布局的viewport:layoutviewport

想象下layoutviewport是一张大的不能改变大小和角度的图片。现在你有个更小的框来观看

这张大图片,这个框被不透明的材料包围,因而你只能看到大图片的一部分。你通过这个框 子看到的大图片的部分被称为虚拟viewport(visual viewport)。你能拿着这个框站得离大图片 远点(用户的缩小页面功能),以一次性看到这个大图片。或者你能站得近点(用户的放大 页面功能)以看到一部分。你能改变这个框子的方向,但这张大图片的大小和形状都不会改 变。 

  • 但是CSS 布局,特别是感性的宽度(percentual widths)通常是按照layoutviewport

  • 定义,而比visualviewport宽很多

  • 然而<html>元素的宽度继承于layoutviewport,你的CSS应预先准备着需要处理的屏幕

  • (layoutviewport)是不是远远超过手机屏幕宽度。这用以保证你的网站外观特性而恰如

  • 在桌面浏览器上一样layoutviewport到底有多宽?每个浏览器都不同。iPhone上的Safari使用980pxOpera 850px,安卓的Webkit核心800px,IE974px。 


    

document. documentElement. clientWidth/Height

    含义:layoutviewport尺寸 

    度量:CSSpixels

    完整支持:Opera, iPhone, Android, Symbian, Bolt, MicroB, Skyre, Obigo问题:在Iris上它标示visualvieport

    三星的Webkit核心浏览器,仅当在页面上写入<meta viewport>标签,才正确表 示。否则就代表着<html>的尺寸
    FireFox设备的pixels来度量
    IE返回1024 x 768 px,而准确的尺寸保存在document.body.clientWidth/Height NetFront仅当100%缩放时候才正确 塞班的Webkit1(S60v3设备)不支持这些属性

    不支持:黑莓 



window.innerWidth/Height

    含义:visualviewport尺寸 

    度量:CSSpixels

    完整支持:iPhone, Symbian, BlackBerry问题:

    FireFoxOpera设备的pixels返回该数值
    Android, Bolt, MicroB, NetFront CSSpixels返回该数值,且 为layoutviewport的值

    不支持:
        IE,它使用document. documentElement. offsetWidh/Height来表示

        三星的Webkit核心浏览器,仅当在页面上写入<meta viewport>标签,才正确表

       示。否则就代表着<html>的尺寸 混乱:Iris, Skyre, Obigo返回的值不知所云 



4. 跨终端的viewport

    320px定宽

<meta name="viewport" content="width=320">;最初这是Apple的 一个html扩展标签,但被许多浏览器复用,意义是设置layoutviewport的宽度。

设置页面的width,也就是设置了html容器的宽度,使界面在各个移动设备上以比较友好的样式布局。方法简单

缺点:对于现在越来越泛滥的大屏手机,320的宽度显然并不能给以用户良好的体验。

    响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

简单来说,响应式布局下的网页就像是一辆汽车,而viewport的width就是变速器。比如:假设width大于200小于320时时汽车挂1档(界面以方式1展示),大于320小于500时汽车挂2档(界面以方式2展开)。。。。。。。

但是不得不说,在当今移动设备井喷式发展的情况下。要想做到更多的自适应,响应式布局的工作量会越来越大,并且DOM和javascript的大量冗余会大大降低网站的效率

CSS3 Flex布局

Flex弹性布局推荐大家看看大漠翻译的Flexbox — fast track to layout nirvana?》 链接:http://www.w3cplus.com/css3/flexbox-basics.html

   REM布局

rem是什么?

rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

rem如何布局?

知道了rem的特性后我们很容易能想到,如果我们整个网站的各个元素的尺寸都以rem为单位来设置。我们只需要指定html根元素的font-size的大小就能控制整个网站的大小,并且各个元素之间相对的比例固定,非常方便。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html{
     font-size:20px;
}
.btn {
     width: 6rem;
     height: 3rem;
     line-height: 3rem;
     font-size: 1.2rem;
     display: inline-block;
     background:  #06c;
     color:  #fff;
     border-radius: .5rem;
     text-decoration: none;
     text-align: center;    
}

根据规则,我们很容易推算出:.btn类的width=6*20px=120px   height=3*20px=60px .......................

换而言之,我们只要确定好各个子元素与根元素之间的比例,当界面在不懂的设备展示时,只需要根据设备的viewport来调整html的font-size即可找到合适的layoutviewport宽度


© 著作权归作者所有

共有 人打赏支持
sHarenZ
粉丝 0
博文 4
码字总数 2193
作品 0
绵阳
程序员
Html开发之Viewport的使用

近年来随着移动端的快速发展,越来越多传统的web应用需要适配移动终端,下面记录一下如何通过viewport实现简单的不同型号的手机端的适配问题。不过在此之前,介绍一下如何通过Chrome浏览器,调试...

LCore
2014/10/19
0
9
2018-05-21 响应式设计

1.什么是响应式设计? 让一个网站可以兼容不同分辨率的设备。 给用户更好的视觉使用体验。 2.诞生背景 在智能手机还未普及之前,平板电脑之类的终端更没有普及,我们所浏览的网页大多都是通过...

瑾瑜爱上猫
05/21
0
0
响应式Web设计(三):响应式Web设计的方法

  介绍完响应式Web的背景和概念之后,是时候该介绍具体的实现方法了,其实响应式Web设计的方法很简单,就是利用CSS3的媒体查询Media Queries和Viewport来解决问题的。   首先我们一起来看...

幸福2胖纸
2013/05/06
0
2
Viewport解决分辨率适配问题

Viewport:字面意思为视图窗口,在移动web开发中使用。表示将设备浏览器宽度虚拟成一个特定的值(或计算得出),这样利于移动web站点跨设备显示效果基本一致。 基本写法: <meta name="view...

DrmFly
2012/06/04
0
0
使用Flexible实现手淘H5页面的终端适配

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页...

问题达人
2016/03/29
29
0
使用Flexible实现手淘H5页面的终端适配 #17

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页...

GIFCOOL
2016/09/22
56
0
百度地图API入门——(5)百度地图API的简介

在一点使用经验都没有的时候,看简介,只能有些许的知晓作用。还是在写了几个超简单程序后,再回头看,比较有意义。 1. 谁用? 百度地图API是给JavaScript开发人员使用的。 2. 兼容性呢? 说...

晨曦之光
2012/04/24
453
0
基于HTML5的Web SCADA工控移动应用

在电力、油田燃气、供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex、Silverlight甚至Applet这样的重客户端方案,在HTML5流行前VML和...

xhload3d
2015/12/28
541
1
基于HT for Web的Web SCADA工控移动应用

在电力、油田燃气、供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex、Silverlight甚至Applet这样的重客户端方案,在HTML5流行前VML和...

xhload3d
2015/03/18
0
2
使用Flexible实现手淘H5页面的终端适配--大漠

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页...

拉普拉斯婷
2016/12/15
35
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring配置xml启动报错 Connot find 'beans'

1.我们先看一下spring的原始配置 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSc......

江湖鱼大虾
7分钟前
0
0
与女儿谈商业模式 (4):戴尔的成功秘诀

分类:与女儿谈商业模式 | 标签: 戴尔 经济学 陈志武 2007-05-15 10:26阅读(7434)评论(36)   2007年5月《创富志》与“女儿谈商业模式”专栏 (之四)   戴尔的成功秘诀   陈志武   ...

祖冲之
16分钟前
0
0
www.w3.org被qiang导致logback报错:Connect reset

web项目部署到tomcat后,web项目中的logback不能运行,报错信息如下: Reported exception: ch.qos.logback.core.joran.spi.JoranException: I/O error occurred while parsing xml file......

浮躁的码农
30分钟前
0
0
JDeveloper中文乱码解决

全局设置字体; 全局设置环境编码; 项目设置编译器环境编码。

wffger
58分钟前
2
0
MySQL主从介绍 , 准备工作,配置主,配置从, 测试主从同步

MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主从后,在A上写数据,另外一台B也会跟着写数据,两者数据实时同步的 MySQL主从是基于binlog的,主上须开启bin...

TaoXu
今天
2
0
线性代数学习总结

亭子happy
今天
1
0
Java8:Lambda表达式增强版Comparator和排序

1、概述 在这篇教程里,我们将要去了解下即将到来的JDK 8(译注,现在JDK 8已经发布了)中的Lambda表达式——特别是怎样使用它来编写Comparator和对集合(Collection)进行排序。 这篇文章是...

孟飞阳
今天
0
0
从架构到组件,深挖istio如何连接、管理和保护微服务2.0?

近几年我一直从事于微服务系统的设计以及实现方面的工作,属于微服务架构一线实践者。之前做过一些单体系统的微服务改造,在微服务拆分、治理等方面都有一定的经验。 本人比较特殊一点的经历...

xiaomin0322
今天
1
0
基于vue的h5文件切片上传(获取文件md5,实现秒传、进度条实现)

template <button @click="file"></button><label ref="upload" style="position: relative;"> <input type="file" @change="selectFile" style="position: abs......

hkaikai
今天
2
0
Spring Boot 2.0 项目实现自同步AD域账号

在通过Spring Boot的自动化装配功能及JDK自带的LDAP模块,可通过如下几个简单步骤实现业务系统自动同步AD域账号功能。 1. Java自带ldap搜索域账号信息核心代码: try { LdapContext ctx...

B超
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部