HTML5开发手机应用--viewport的作用--20150216
在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢。在网上,大家会得到很多答案。我从网上搜集了部分介绍,整理一下,以留备用。
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
什么是Viewport
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。
width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放
“viewport”,翻译为中文可以叫做“视区”,大家都知道移动设备的屏幕一般都比PC小很多,webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上,默认的虚拟窗口为980像素宽(目前大部分网站的标准宽度),然后按一定的比例(3:1或2:1)进行缩放。也就是说当我们加载一个普通网页的时候,webkit会先以980像素的浏览器标准加载网页,然后再缩小为490像素的宽度。注意这个缩小是一个全局缩小,也就是页面上的所有元素都会缩小。如下图所示,一个普通的文章页面在移动设备的效果:
页面以980像素加载,没有变形,但是按比例缩放后,很多东西用肉眼基本看不清了。
那么我们能不能人为改变webkit的视区呢?当然能,在<head>与</head>之间加上如下视区代码:
<meta name="viewport" content="width=500"/>
<meta name="viewport" content="width=device-width" />
转载于:https://www.cnblogs.com/thelongmarch/p/4294419.html
HTML5开发手机应用--viewport的作用--20150216相关推荐
- 使用HTML5开发手机离线应用
本来这篇文章想叫<挺起你的HTML5>或者<让HTML5飞>或者神马其他的,但是为了更好的体现主题,我就用这个直白点的题目吧 ~ 随 着各种智能手机(iPhone.Andro ...
- 开发app要用html吗,为什么要使用HTML5开发手机APP?
为什么要使用HTML5开发手机APP?从未来的发展趋势看,现在的大部分开发商都因为HTML5的便捷性而广泛使用它,而且使用HTML5可以带来更好的互动.从程序员开发的角度来讲,HTML5的代码更加清晰 ...
- html5文章 -- 应用HTML5 开发手机APP
因为HTML5暂时无法短期内在PC普及,主要方向在使用高端浏览器的高端移动设备,所以可以用作开发Android系统的App.但只有Android2.2以上.iOS3.2以上均支持HTML5,两大平台有 ...
- Android and HTML5 开发手机应用
作为一个WEB开发者,HTML5让我兴奋,因为它可以将桌面应用程序功能带入浏览器中.但在国内,看着到处横行的IE8版本以下的浏览器,觉得到能大规模使用HTML5技术的那天,还遥遥无期.但面对iOS及A ...
- HTML5开发手机项目总结
http://blog.csdn.net/yual365/article/details/12612789 让网页的宽度自适应屏幕<meta name="viewport" ...
- HTML5开发手机项目-个人总结
来自http://hi.baidu.com/welan/item/9206c0336b665abf134b14c2,很不错的总结 让网页的宽度自适应屏幕<meta name="view ...
- HTML5开发手机项目-个人总结(转)
让网页的宽度自适应屏幕<meta name="viewport" content="width=device-width"/> 1)html上 ...
- HTML5开发手机项目-总括
1.添加viewport标签 让网页的宽度自适应屏幕 <meta name="viewport" content="width=device-width, init ...
- HTML5开发手机项目总结【很好】
让网页的宽度自适应屏幕<meta name="viewport" content="width=device-width"/> 1)html上 ...
最新文章
- 编程之美-数组分割方法整理
- angularjs源码笔记(4)--scope
- malloc_free_new_delete
- 2020-10-12
- Shader Graph 护盾
- IDM下载资源提示无法连接到服务器,代理,防火墙
- filenet分布式部署
- SPSS基础教程:SPSS菜单命令详解
- vue点击后html放大,vue实现点击图片放大效果
- 三级联动插件distpicker
- 高级程序员解决问题的思维模式和普通程序员的区别在哪里?
- 小米12S和红米K50至尊版哪个好
- 电商时代的逆向思维法则
- Innovus——数据准备和验证
- 开源3D激光SLAM项目BLAM
- RRT路径规划算法在二维仿真环境中的应用 -- Python代码实现
- App Store Connect显示app已经上架(可供销售),但在App Store中没有实时更新
- idea永久激活使用
- 恶搞!关闭程序进程!!嘿嘿嘿~
- 基于机器学习的UEBA在账号异常检测中的应用
热门文章
- Redis专题-持久化方式
- slim android7 nexus7,【畅玩7.0】加一直升pure nexus 7.0系统简单教程(1106更新)
- java rmi 还有用吗_java rmi使用后的感想
- 如何强化应用安全能力,全面拦截 Log4j 漏洞攻击
- 网易云音乐音视频算法的 Serverless 探索之路
- Spring Cloud 2020.0.0 正式发布,对开发者来说意味着什么?
- Vbox linux虚拟机桥接(VM操作也类似)
- mysql+keepalived必须要lvs吗_MySQL 双主热备 + LVS + Keepalived 高可用操作记录
- c语言初学者百题大战答案七,C语言百题大战2405how many minutes
- 单片机发送数据到mysql_单片机的数据怎样进入到sql server的数据库中