你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
lanpang

【移动开发03】WAP开发中重要HTML头标签 3个回复 专栏 @ HTML

lanpang 发布于 3 年前

WAP开发中重要HTML头标签介绍

Meta 之 viewport屏幕控制标签

举个列子,一个比较标准的wap网页viewport设置为:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

但这个标签代表着什么意思呢?先看下面几个标准参数的定义。

width: viewport 的宽度 (范围从 200 到 10,000 ,默认为 980 像素 )

device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大, 像素密度设备相应缩小。

height: viewport 的高度 (范围从 223 到 10,000 )

initial-scale: 初始的缩放比例 (范围从>0到 10 )

minimum-scale: 允许用户缩放到的最小比例

maximum-scale: 允许用户缩放到的最大比例

user-scalable: 用户是否可以手动缩放

所以很好理解我们主站4个参数的设置是为了让网页等设备dpi宽度显示,并且让用户无法缩放网页。

ps:另外ios7还加了比较特别的私有属性minimal-ui

网站上加了这个标签后网站在加载时便可隐藏顶部的地址栏与底部的导航栏。可以使wap更像APP。

Meta 之 format-detection

使用原因:
在网页输出一串非连接数字,但很多手机浏览器却会自动把你这个文字加链接样式、然后用户点了会被当电话号码去自动拨号!oh~shit。
要想去掉这个拨号链接该如何操作呢?就靠我们的format-detection标签

telephone=no 就禁止了把数字转化为拨号链接

telephone=yes 就开启了把数字转化为拨号链接

站内实例

几个ios特有的 webapp Meta 私有属性 和 link私有标签

WebApp简单的说就是在iPhone/iPad等苹果移动设备上,可以把网站”添加至主屏幕”,把网站当app样打开使用。

alt text

为了是我们的网页使用起来像app所以需要加一下几个标签(ps:所以app里的h5模板可以不必配这几个标签的)

举例站内习惯加的3个webapp meta标签如下

站内习惯加的4个webapp link标签如下

登录后回复,如无账号,请使用邀请码注册