html5在移动端的屏幕适应性问题
html5在移动端的屏幕适应性问题
Html5 以前是最最炙手可热的技术。移动端也由于html5技术的增加变得更加变通一些。人人都喜欢“Write once。run more”,但在今年扎克伯格承认在html5上的失策以来,我们也应该清醒的认识到html5作为一种新兴技术,还有很多不完好的地方。比方html5 的效率问题。这足以让众多程序猿们无力吐槽,消费者们也会无法忍受。但不可否认的是html5给我们带来给好的web技术,它是未来发展的趋势,而且不是 终点,我们可以做的就是更加努力的完好它,写出更好,更有效率的代码。
好了,说了这么多废话,如今開始进入主题,android的适配问题是最让android程序猿头疼的问题。大家为此也是八仙过海,各显神通啊,但在 html5这里我们能够更好的解决这项问题。
手机浏览器是把页面放在一个虚拟的“窗体”(viewport)中。通常这个虚拟的“窗体” (viewport)比屏幕宽,这样就不用把每一个网页挤到非常小的窗体中(这样会破坏没有针对手机浏览器优化的网页的布局),用户能够通过平移和缩放来看网 页的不同部分。经常使用的viewport布局为:<meta name="viewport"
content="width=device-width,user-scalable=no" />
详细的含义是:
width:控制 viewport 的大小,能够指定的一个值,假设 600。或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素),默认的虚拟窗体为980像素宽(眼下大部分站点的标准宽度),然后按一定的比例(3:1或2:1)进行缩放。
height:和 width 相相应。指定高度。
target- densitydpi:一个屏幕像素密度是由屏幕分辨率决定的。通常定义为每英寸点的数量(dpi)。Android支持三种屏幕像素密度:低像素密度, 中像素密度。高像素密度。一个低像素密度的屏幕每英寸上的像素点更少。而一个高像素密度的屏幕每英寸上的像素点很多其它。Android Browser和WebView默认屏幕为中像素密度。
以下是 target-densitydpi 属性的 取值范围
device-dpi –使用设备原本的 dpi 作为目标 dp。
不会发生默认缩放。
high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备对应缩小。
medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备对应放大, 像素密度设备对应缩小。 这是默认的target density.
low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备对应放大。
<value> – 指定一个详细的dpi 值作为target dpi. 这个值的范围必须在70–400之间。
<meta name="viewport" content="target-densitydpi=device-dpi" />
<meta name="viewport" content="target-densitydpi=high-dpi" />
<meta name="viewport" content="target-densitydpi=medium-dpi" />
<meta name="viewport" content="target-densitydpi=low-dpi" />
<meta name="viewport" content="target-densitydpi=200" />
为了防止Android Browser和WebView 依据不同屏幕的像素密度对你的页面进行缩放,你能够将viewport的target-densitydpi 设置为 device-dpi。当你这么做了,页面将不会缩放。相反,页面会依据当前屏幕的像素密度进行展示。在这样的情形下,你还须要将viewport的 width定义为与设备的width匹配,这样你的页面就能够和屏幕相适应。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:同意用户缩放到的最大比例,范围从0到10.0。
minimum-scale:同意用户缩放到的最小比例。范围从0到10.0。
user-scalable:用户能否够手动缩放,值能够是:①yes、 true同意用户缩放。②no、false不同意用户缩放,假设你将其设置为no,那么minimum-scale 和 maximum-scale都将被忽略,由于根本不可能缩放。
。
全部的缩放值都必须在0.01–10的范围之内。
将这些属性设置之后放入html5 的meta属性中,就可以对手机屏幕进行适应。例:
[mw_shl_code=xhtml,true]<meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
"
/>[/mw_shl_code]
以下是两个实际使用的样例:
(设置屏幕宽度为设备宽度。禁止用户手动调整缩放)
<meta name="viewport" content="width=device-width,user-scalable=no" />
(设置屏幕密度为高频。中频,低频自己主动缩放。禁止用户手动调整缩放)
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
html5在移动端的屏幕适应性问题的更多相关文章
- HTML5 Mobile 适应移动端的屏幕<meta name='viewport' content='xxxx'>
网页手机wap2.0网页的head里加入下面这条元标签,在移动端的浏览器中页面将以原始大小显示,并不允许缩放. 加入 如下代码 即可自适应移动端的屏幕: <meta name="vie ...
- 7种方法解决移动端Retina屏幕1px边框问题
在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...
- 7种方法实现移动端Retina屏幕1px边框效果
在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...
- 浅谈html5 video 移动端填坑记
这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...
- html5实现移动端下拉刷新(原理和代码)
这篇文章给大家介绍的内容是关于html5实现移动端下拉刷新(原理和代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 移动端的下拉刷新是一个很常见的功能,也有许多开源库实现了这个功 ...
- HTML5与移动端web学习笔记
HTML5 提供了很多新的功能,主要有: 新的 HTML 元素,例如 section, nav, header, footer, article 等 用于绘画的 Canvas 元素 用于多媒体播放的 ...
- HTML5与移动端Web
概述 HTML5 提供了很多新的功能,主要有: 新的 HTML 元素,例如 section, nav, header, footer, article 等 用于绘画的 Canvas 元素 用于多媒体播 ...
- html5 meta(移动端)介绍及使用
随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择.然而,每一款手机有不同的分辨率,不同屏幕 ...
- 【小月博客】 Html5 上传图片 移动端、PC端通用
在博客园注册账号有些天了,感觉有些许欣慰,自己写的东西有人在看,有人在评论很是开心.(ps: 满足一下虚荣心吧!) 废话不多说了,说一下今天给大家分享的是 html5上传图片.我们是在移动端使用的,但 ...
随机推荐
- 26、Django实战第26天:配置全局导航
1.编辑index.html,继承base.html 2.编辑base.html,根据是否登录不同显示 问题:当我们选中一个导航,选中样式并没有成为选中的状态 因此我们编辑base.html对导航中进 ...
- shell 查看 具体某行的值
sed: sed '5!d' file awk: awk 'NR==5' file
- Scrum实施调查案例
什么是敏捷开发方法?什么是SCRUM? 有人在这个字面上下功夫,说敏捷就是反应要灵敏,动作要快捷:有人还在字面上进行延伸,说敏捷就是又好又快,或者就是多快好省:有人说敏捷就是光写代码不写文档:有人觉得 ...
- [Codeforces 7E] Defining Macros
Link:http://codeforces.com/problemset/problem/7/E Brief Introduction:一个表达式由多个“Macros”组成,每个Macro都为一个整 ...
- Android 架构 4.总结
以下是Keegan小钢大神原创博客: Android项目重构之路:架构篇Android项目重构之路:界面篇Android项目重构之路:实现篇 看了这几篇文章,以及下面的评论,总结一下,以便以后拓展: ...
- hidefocus小技巧
hidefocus即隐藏聚焦,具有使对象聚焦失效的功能,其功能相当于: onFocus="this.blur()" 它的值是一个布尔值,如 hidefocus="true ...
- winform如何保持TreeView节点展开和折叠的状态
转载:http://blog.sina.com.cn/s/blog_6abcacf5010138q5.html private Hashtable NodesStatus = new Hashtabl ...
- java中的注解详解和自定义注解
一.java中的注解详解 1.什么是注解 用一个词就可以描述注解,那就是元数据,即一种描述数据的数据.所以,可以说注解就是源代码的元数据.比如,下面这段代码: @Override public Str ...
- 【SQL Server】sql server更改了数据表的字段/新增数据表的字段 无法保存
sql server更改了数据表的字段/新增数据表的字段 无法保存 解决方法:进入 工具-->选项-->Designers-->表设计器和数据库设计器-->取消勾选 即可
- Intel haxm安装失败问题解决
在安装Intel haxm为安卓模拟器加速时,会遇到提示VT-X未开启问题,问题提示如下图 工具/原料 Intel haxm 安卓模拟器 方法/步骤 确认你的处理器是否是Intel的,如果是A ...