当前位置:首页 > 日记 > 正文

HTML5在移动端屏幕适配的一个例子

HTML5在移动端屏幕适配的一个例子
本文主要介绍了HTML5在移动终端上的屏幕适配问题,并通过几个实例对其具体应用进行了详细的描述。

HTML5是一个最热门的技术,移动终端也因为HTML5技术的加入变得更灵活,每个人都爱写一次,跑,more但在今年扎克伯格承认在HTML5的错误我们也应该意识到HTML5作为一种新的技术,有很多地方不完善,作为HTML5的效率,这足以让许多程序员无法Tucao,消费者将无法忍受。但不可否认的是,HTML5带给我们的Web技术好。这是未来发展的趋势,而不是终点。我们能做的是更加努力地改进它,编写更高效的代码。

好吧,那么多废话,现在开始进入主题,Android程序员Android适应问题是最头疼的问题,因此我们也各显神通啊,八仙过海,但在HTML5可以更好地解决这个问题。手机浏览器的网页在一个虚拟的窗口(视图),通常的虚拟窗口(视口)比宽屏幕,所以你不必挤每一页的一个小窗口(这不会损害手机浏览器页面优化布局,用户可以)通过平移和缩放视图页面的不同部分。常见的视口布局:

具体含义是:
宽度:控制视口的大小,可以是一个指定值,如果600,或一个特殊值,如设备宽度设备(宽度为100%像素的缩放CSS),默认虚拟窗口是980像素宽(大多数网站标准宽度),然后按一定比例(3:1或2:1缩放)。

高度:与宽度相对应,指定高度。

目标densitydpi:屏幕像素密度的屏幕分辨率确定,通常定义为每英寸点数的数量(DPI)。安卓支持三屏幕像素密度:低像素密度、介质密度和像素,像素密度高,低像素密度的屏幕每英寸像素少,和高像素密度屏幕上每英寸像素越多,Android浏览器WebView默认屏幕中的像素密度。

以下是对目标densitydpi属性值的范围

使用设备原始的DPI作为目标DP,没有默认缩放。

高DPI ndash;利用华电国际为目标的DPI中像素密度和低像素密度的设备也相应减少。

中等DPI ndash;使用MDPI作为目标DPI,高像素密度的设备放大相应,和像素密度的设备也相应减少。这是默认的目标密度。

低DPI使用MDPI作为目标DPI。中的像素密度和高像素密度的设备被放大,因此。

指定特定DPI值作为目标DPI值的范围。必须在70ndash;400。

为了防止Android浏览器WebView缩放页面根据不同的屏幕像素密度,你可以设置视口的目标densitydpi到device-dpi.when你做到这一点,该页面将不会被放大。相反,页面将显示在当前屏幕的像素密度的基础。在这的情况下,你还需要定义视口的宽度与设备的宽度的比赛让你的页面可以适应屏幕。
初始比例:初始缩放比例也是页面第一页加载时的缩放比例。
最大比例:允许用户从0缩放到10的最大比例。
最小规模:允许用户将最小规模从0扩展到10。
用户可伸缩:如果用户可以手动缩放,值可以是:1。是的,TRUE允许用户缩放;不,false不允许用户缩放,如果您设置为NO,那么最小规模和最大规模将被忽略,因为它是不可能变焦。

所有的变焦值必须在0.01ndash范围;10。

在将这些属性设置为HTML5的元属性之后,您可以适应电话屏幕,例如:

复制代码代码如下所示:
{ mw_shl_code = XHTML,true} 内容
高度= { } | pixel_value装置高度,
宽度= { pixel_value设备宽度| },
初始规模= float_value,
最小规模= float_value,
最大规模= float_value,
用户可扩展= {是} |,
目标densitydpi = { dpi_value装置DPI高DPI中DPI | | | |低DPI }

/ / mw_shl_code } {

这里有两个实际使用的例子:

(设置屏幕宽度为设备宽度,用户不允许手动调整缩放)

复制代码代码如下所示:
(设置屏幕密度为高频、中频、低频自动缩放、无需手动调整和缩放)

复制代码代码如下所示:

相关文章

目前比较完整的CSS重置复位方法概

目前比较完整的CSS重置复位方法概

复位,方法,重置,完整,电脑软件,在今天的网页设计/开发实践中,使用CSS将样式样式添加到X HTML标记中是很重要的。然而,现实中发生的事情总是相反的。许多CSS样式在不同的浏览器中有不同的解释和表示。 在今天的Web设计/开发实践中,使用CSS将样…

网页背景的绘制

网页背景的绘制

绘制,网页背景,电脑软件,使用js插入图片并控制图片的宽度和高度,然后使用CSS缩放背景图片。下面是具体的实现过程,喜欢的朋友可以学习一下。 复制代码代码如下所示: 1。用js插入图片并控制图片宽度。 复制代码代码如下所示: $(函数(){()) $(); $(# mainb…

它是免费下载和使用QQ空间软件(wp7

它是免费下载和使用QQ空间软件(wp7

下载,空间,它是,电脑软件,QQ,它是免费下载和使用QQ空间软件(wp7版)的手机吗 手机QQ软件(wp7版)版本是完全免费下载和使用手机,下载和使用手机QQ空间软件需要连接到互联网,会产生GPRS流量费,由当地运营商收取流量费,请致电当地运营商咨询(移动联通电…

一张可爱的蓝色卡通钢笔

一张可爱的蓝色卡通钢笔

卡通,蓝色,可爱,电脑软件,本教程是介绍给朋友的,用CDR来画一支蓝色可爱的卡通笔。本教程所画的钢笔非常可爱,方法也很简单。我向你推荐,希望能对你有所帮助。 本教程是介绍朋友用CDR绘制的一支蓝色可爱卡通笔,该教程是关于画笔的画图过程,本文介…

div设置浮点后使下一个div另一行

div设置浮点后使下一个div另一行

浮点,设置,电脑软件,div,加入浮动后:左,按钮的标签将跟随区这意味着增加一个类来明确他们之间的div。下面的例子可以看到。 今天正在做一个网页项目,例如: 复制代码代码如下所示: 请不要直接打开此页。 返回 这是当出口增加浮动:左在CSS,它会使…

C#默认运行程序实现代码管理员

C#默认运行程序实现代码管理员

默认,管理员,运行,代码,程序,最后一篇博客写了如何通过网络时间来更新系统时间,以及如何在那个时候进行测试,但没有成功。然后我想到了是否我的操作系统上开发的Win8。当时我猜想的权威不足以修改系统时间,所以我把它作为一个管理员,结果是成功…

PS设计和制作的特殊效果,从墙上剥落

PS设计和制作的特殊效果,从墙上剥落

墙上,特殊效果,电脑软件,PS,本文主要介绍PS设计与制作在墙上的特效,教程很棒,和你喜欢的朋友可以一起学习。 影响: 原始图: 为了节省空间,我尝试制作一个短篇故事。首先添加一个渐变填充层。 输入几个字母~ 双击字母层打开图层样式,添加渐变~ 内…

ai字体实时颜色示例教程

ai字体实时颜色示例教程

字体,教程,实时,示例,颜色,本教程是朋友介绍ai字体实时颜色的例子,教程比较简单,适合初学者学习,希望通过本教程你能对ai实时颜色有更深的理解和应用。 在AI,有一个快速、准确、方便、直观的矢量图形的着色方法,即实时颜色。如果你需要彩色图形…

教你用烟花画现实菲尔普斯飞利浦

教你用烟花画现实菲尔普斯飞利浦

菲尔,烟花,普斯,教你用,现实,本教程介绍Fireworks绘制菲尔普斯手机使用,绘制效果非常逼真,因为绘画更多的步骤的过程中,作者没有做一个详细的介绍,简单的文字,但教程是很实用的,它又是值得学习,与大家一起分享学习 本教程介绍Fireworks绘制菲尔普…

新手:PS设计容易忽略的五个问题

新手:PS设计容易忽略的五个问题

新手,电脑软件,PS,本教程是一个很容易被忽视的五个问题,当朋友介绍ps来设计图片时。这是新手必看的新课程。有些错误是经验中的错误,有些是容易找到的。其他人可能不知道你为什么这么做。 当你知道一个菜鸟对PS图象处理软件有一个神奇的工具,…

使用jQuery管理选择结果

使用jQuery管理选择结果

选择,电脑软件,jQuery,jQuery选择的元素非常类似于数组。它们可以由jQuery提供的一系列方法处理,包括长度、查找元素和截取段落。 1。获取元素的个数。 在jQuery中,选择器中的元素数量可以通过大小()方法获得,这与数组中的长度属性类似,并返回…

PHP批量删除cookie的一种简单实现

PHP批量删除cookie的一种简单实现

简单实现,方法,批量删除,电脑软件,PHP,本文介绍了php批量删除cookie的简单实现,供大家参考,具体实现方法如下: 复制代码代码如下: Cookie:删除单个密钥集为空,时间设置时间已过期。 setcookie(名 删除多个cookie,遍历数组 foreach(_cookie美元…