java viewport,viewport详解
这次想聊聊移动开发相关的事。是的,你没有看错,一句话就可以开始你的移动前端开发。
你心里一定在想,什么话这么酷,能够瞬间带入到移动前端开发的世界。
但其实它一点也不新奇,不复杂。
viewport简介
没错,就是viewport特性,一个移动专属的Meta值,用于定义视口的各种行为。
该特性最先由Apple引入,用于解决移动端的页面展示问题,后续被越来越多的厂商跟进。
举个简单的例子来讲为什么会需要它:
我们知道用户大规模使用手机等移动设备来进行网页浏览器,其实得益于智能手持设备的兴起,也就是近几年的事。(还记得不久前的几年,满大街都还是诺基亚的天下么?)
这时有一个很现实的问题摆在了厂商面前,用户并不能很好地通过手机等设备访问网页,因为屏幕太小。
layout viewport (布局视口)
Apple也发现了这个问题,并且适时的出现,它提出了一个方案用来解决这个问题。在iOS Safari中定义了一个viewport meta标签,用来创建一个虚拟的布局视口(layout viewport),而这个视口的分辨率接近于PC显示器,Apple将其定义为980px(其他厂商各有不同①)
这就很好的解决了早期的页面在手机上显示的问题,由于两者之间的宽度趋近,CSS只需要像在PC上那样渲染页面就行,原有的页面结构不会被破坏。①的描述大致如下,数值不一定持续准确,厂商可能更改,但这个绝对值其实并非特别重要: iOS, Android基本都是: 980px BlackBerry: 1024px
visual viewport (视觉视口)
有了layout viewport(布局视口),我们还需要一个视口用来承载它,这个视口可以简单的认为是手持设备物理屏幕的可视区域,我们称之为(视觉视口)visual viewport。这是一个比较直观的概念,因为你能看得见你的手机屏幕。
对于visual viewport,开发者一般只需要知道它的存在和概念就行,因为无法对它进行任何设置或者修改。很明显,visual viewport的尺寸不会是一个固定的值,甚至每款设备都可能不同。大致列几种常见设备的visual viewport尺寸:iPhone4: 320*480px
iPhone5/SE: 320*568px
iPhone6/6s/7/8: 375*667px
iPhone6/6s/7/8Plus: 414*736px
iPhoneX: 375*812px
以iPhone4S为例,会在其320px②的visual viewport(视觉视口)上,创建一个宽980px的layout viewport(布局视口),于是用户可以在visual viewport(视觉视口)中拖动或者缩放网页,来获得良好的浏览效果;布局视口用来配合CSS渲染布局,当我们定义一个容器的宽度为100%时,这个容器的实际宽度是980px而不是320px,通过这种方式大部分网页就能以缩放的形式正常显示在手机屏幕上了。
②的描述大致如下: 早期移动前端开发工程师常能见到宽640px的设计稿,原因就是UI工程师以物理屏幕宽度为320px的iPhone4-iPhone5S作为参照设计; 当然,现在你还可能会见到750px和1242px尺寸的设计稿,原因当然是iPhone6的出现 当然,为了更好的适配移动端或者只为移动端设计的应用,单有布局视口和视觉视口还是不够的。
ideal viewport(完美视口)
我们还需要一个视口,它类似于布局视口,但宽度和视觉视口相同,这就是完美视口(ideal viewport)。
有了完美视口,用户不用缩放和拖动网页就能够很好的进行网页浏览。而完美视口也是通过viewport meta的某种设置来达到。
说了这么一大堆的东西,貌似都和viewport有关联,那么viewport到底怎么搞,请继续往下。
viewport特性
通常情况下,viewport有以下6种设置。当然厂商可能会增加一些特定的设置,比如iOS Safari7.1增加了一种在网页加载时隐藏地址栏与导航栏的设置:minimal-ui,不过随后又将之移除了。
width
width被用来定义layout viewport(布局视口)的宽度,如果不指定该属性(或者移除viewport meta标签),则layout viewport宽度为厂商默认值。如:iPhone为980px;
举个例子:
此时的layout viewport(布局视口)将成为ideal viewport(完美视口),因为layout viewport(布局视口)宽度与设备视觉视口(visual viewport)宽度一致了。
除了width之外,还有一个属性定义也能实现ideal viewport(完美视口),那就是initial-scale。
height
与width类似,但实际上却不常用,因为没有太多的use case(使用案例)。
initial-scale
如果想页面默认以某个比例放大或者缩小然后呈现给用户,那么可以通过定义initial-scale来完成。
initial-scale用于指定页面的初始缩放比例,假定你这样定义:
那么用户将会看到2倍大小的页面内容。
在说width的时候,我们说到initial-scale也能实现ideal viewport(完美视口),是的,你只需要这样做,也可以得到完美视口:
maximum-scale
在移动端,你可能会考虑用户浏览不便,然后给予用户放大页面的权利,但同时又希望是在一定范围内的放大,这时就可以使用maximum-scale来进行约束。
maximum-scale用于指定用户能够放大的比例。
页面的默认缩放值initial-scale是1,用户最终能够将页面放大到这个初始页面大小的5倍。
minimum-scale
类似maximum-scale的描述,不过minimum-scale是用来指定页面缩小比例的。
通常情况下,为了有更好地体验,不会定义该属性的值比1更小,因为那样页面将变得难以阅读。
user-scalable
如果你不想页面被放大或者缩小,通过定义user-scalable来约束用户是否可以通过手势对页面进行缩放即可。
该属性的默认值为yes,即可被缩放(如果使用默认值,该属性可以不定义);当然,如果你的应用不打算让用户拥有缩放权限,可以将该值设置为no。
使用方法如下:
结语
正如开篇所说,这既不高深也不新奇,它而仅仅是一点观念转变。
当你掌握了viewport,那么意味着你已经大致了解了移动平台与PC平台的不同,你可以更专注而细致的去解决某些平台差异问题。
总结
在移动端,无论你给viewport设置宽多少,如果没有指定默认的缩放值,则移动端浏览器会自动计算这个缩放值,以达到当前页面不会出现横向滚动条(或者说,viewport的宽度就是屏幕的宽度)
如果什么都还没搞懂,也没关系,会设置viewport就可以了,不影响我们开发移动端,当然,理解了解这些概念才能体现出我们的专业,一开始不是很理解的,先这样用,之后看多几次理解。
第一种情况 推荐使用
设置layout viewport(布局视口)等于设备视觉视口(visual viewport)宽度, 此时给页面设置百分比布局
第二种情况
设置layout viewport(布局视口)固定宽度, 此时不可以设置 initial-scale,max-scale,min-scale, 利用手机的自动缩放来使用手机屏幕, 此时的元素100%宽度,表示设置固定的宽度
java viewport,viewport详解相关推荐
- Java内存溢出详解之Tomcat配置
Java内存溢出详解 转自:http://elf8848.iteye.com/blog/378805 一.常见的Java内存溢出有以下三种: 1. java.lang.OutOfMemoryError ...
- java基础(十三)-----详解内部类——Java高级开发必须懂的
java基础(十三)-----详解内部类--Java高级开发必须懂的 目录 为什么要使用内部类 内部类基础 静态内部类 成员内部类 成员内部类的对象创建 继承成员内部类 局部内部类 推荐博客 匿名内部 ...
- Java类加载机制详解【java面试题】
Java类加载机制详解[java面试题] (1)问题分析: Class文件由类装载器装载后,在JVM中将形成一份描述Class结构的元信息对象,通过该元信息对象可以获知Class的结构信息:如构造函数 ...
- Java线程池详解学习:ThreadPoolExecutor
Java线程池详解学习:ThreadPoolExecutor Java的源码下载参考这篇文章:Java源码下载和阅读(JDK1.8) - zhangpeterx的博客 在源码的目录java/util/ ...
- Java 线程池详解学习:FixedThreadPool,CachedThreadPool,ScheduledThreadPool...
Java常用的线程池有FixedThreadPool和CachedThreadPool,我们可以通过查看他们的源码来进行学习. Java的源码下载参考这篇文章:Java源码下载和阅读(JDK1.8) ...
- 关于Java的Classpath详解
关于Java的Classpath详解 Java 的新入门者对classpath往往比较困惑,为何在开发环境中能运行的东东出去就不好,或在外面运行的东东挺溜的进了开发环境就死菜. java的优点就是他是 ...
- java异常体系结构详解
java异常体系结构详解 参考文章: (1)java异常体系结构详解 (2)https://www.cnblogs.com/hainange/p/6334042.html 备忘一下.
- java异常处理机制详解
java异常处理机制详解 参考文章: (1)java异常处理机制详解 (2)https://www.cnblogs.com/vaejava/articles/6668809.html 备忘一下.
- Java内存溢出详解
Java内存溢出详解 一.常见的Java内存溢出有以下三种: 1. java.lang.OutOfMemoryError: Java heap space ----JVM Heap(堆)溢出 JVM在 ...
- java拉姆达表达式事例,Java Lambda表达式详解和实例
简介 Lambda表达式是Java SE 8中一个重要的新特性.lambda表达式允许你通过表达式来代替功能接口. lambda表达式就和方法一样,它提供了一个正常的参数列表和一个使用这些参数的主体( ...
最新文章
- POJ 2104 K-th Number 划分树
- 3310复刻版 java_终于等到你:诺基亚3310复刻版开箱简评
- php intl make 错误,无法在Debian上为php安装’intl’扩展名
- 【python图像处理】python绘制3D图形
- java中array,arrayList,iterator;
- css 首字下沉 错位,css+div错位问题的修复小结
- 如何写一个高效进程/线程池_关于高效企业测试的思考(1/6)
- aspnet_regsql
- Android Studio下“Error:Could not find com.android.tools.build:gradle:2.2.1”的解决方法
- 计算机制图的简称市什么,计算机地的图制图复习题.doc
- java Map及其实现类的底层原理
- Java对象映射XML文件
- 【python】数据挖掘 实验:中国二级城市经纬度聚类分析
- 冒险岛手游哪个服务器稳定,冒险岛手游职业选择攻略 骨灰级玩家心得分享
- scree 中的几个内置对象
- 如何选小盘绩优股,分析小盘股的优势和劣势
- android硬编码h264数据,并使用rtp推送数据流,实现一个简单的直播-MediaCodec(二)
- 如何在Windows 8中将项目添加到新的Win + X菜单
- 当 JS 大猪蹄子遇到 HTML 小姐姐
- 对比学习用于推荐系统问题(SSL,S^3-Rec,SGL,DHCN,SEMI,MMCLR)
热门文章
- NS2中Trace部分的一点认识
- 2023中国AIGC应用研究报告 | 附120页报告下载
- 有想象力的《时代周刊》2006年度风云人物:网民
- Foxmail7.2账号帐号邮件备份和恢复
- JXLS快速实现报表输出
- ScheduledExecutorService中scheduleAtFixedRate方法与scheduleWithFixedDelay方法的区别
- 男女相处的150条忠告
- word2vec模型评估_「译」 用 Word2vec 表示音乐?
- 创维百度联手进军人工智能 酷开或填补乐视退出之市场
- c语言程序设计实验报告铜陵学院,16铜陵学院c语言实验报告.docx