手机网页制作的认识（有关meta标签）

近日以来一直在看JQuery Mobile 一个手机开发框架，说实话真的很头疼的~~~~ 因为里面有很多的属性、方法和事件~~~

下面是手机网页的一些认识：

一、<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">

网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

二、<meta name="format-detection" content="telephone=no">

当该 HTML 页面在手机上浏览时，该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。

在 iPhone 上默认值是：

如果你不希望手机自动将网页中的电话号码显示为拨号的超链接，那么可以这样写：

三、<meta name="apple-mobile-web-app-capable" content="yes" />

说明：网站开启对web app程序的支持。

四、<meta name="apple-mobile-web-app-status-bar-style" content="black" />

说明：

在web app应用下状态条（屏幕顶部条）的颜色；
默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。

注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

！！！！苹果web app其他设置：

当然，配合web app的icon 和启动界面需要额外的两端代码进行设定，如下所示：

<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />

说明：这个link就是设置web app的放置主屏幕上icon文件路径

使用：

该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
图片尺寸可以设定为57*57（px）或者Retina可以定为114*114（px），ipad尺寸为72*72（px）

<link rel="apple-touch-startup-image" href="milanoo_startup.png" />

说明：这个link就是设置启动时候的界面（图片五），放置的路劲和上面类似。

使用：

该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
官方规定启动界面的尺寸必须为 320*640（px），原本以为Retina屏幕可以支持双倍，但是不支持，图片显示不出来。

五、<meta name="apple-touch-fullscreen" content="yes">"添加到主屏幕“后，全屏显示 <meta name="apple-mobile-web-app-capable" content="yes" />
这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />//将不识别邮箱
告诉设备忽略将页面中的数字识别为电话号码
iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。这样就能在用户把网页存为书签时，在手机HOME界面创建应用程序样式的图标。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

----------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content="">

----------------------------------------------------------------------------------------------------------------------------

手机网页制作的认识（有关meta标签）相关推荐

dw网页制作入学教程_简单的手机网页制作教程
很多小白会以为建站只能通过电脑,但实际上,用手机也能顺利建站,而且操作非常简单,不需要你懂技术知识哦!下面就跟大家说说手机网页制作教程: 首先,你需要选择一个比较好用的手机网页制作app.尽量找知名度 ...
hbuilderx制作简单网页_简单的手机网页制作教程
很多小白会以为建站只能通过电脑,但实际上,用手机也能顺利建站,而且操作非常简单,不需要你懂技术知识哦!下面就跟大家说说手机网页制作教程: 首先,你需要选择一个比较好用的手机网页制作app.尽量找知名度 ...
浅析手机网页制作流程
在当下的日常生活中人们已经离不开使用手机搜索的习惯,小小的手机在我们生活中作用却是大大的,手机网站的发展前景也让大家越来越关注,这也是手机网站兴起的原因.但是手机网站制作是非常复杂的,那么具体有哪些步 ...
html meta页面自适应,【转载·收藏】 html5手机网站自适应需要加的meta标签
webapp开发初期,会碰到在pc端开发好的页面在移动端显示过大的问题,这里需要在html head中加入meta标签来控制缩放下面是对于这个标签的具体说明: viewport 语法介绍: cont ...
HTML网页结构化框架、meta标签和语义化标签
1.HTML网页结构化框架代码示例 myhtml.html  <!DOCTYPE html> <!--html的根标签(元素), ...
html网页钩子,HTML5中的meta标签和 IE浏览器能识别的钩子
一.meta 标签的使用 1. 使用描述 description属性增加点击率 2. 设置字符集 3. 重定向和定时刷新功能 4.设备宽度自适应(针对移动设备) content 参数: width ...
手机查看html代码工具栏,【Meta标签】实现wap网页去掉手机浏览器默认工具栏
去掉wap端手机浏览器头部搜索栏和底部工具栏的方法: 移动web前端开发,隐藏浏览器地址栏(全屏)解决方案核心代码:window.scrollTo(0, 1); 要注意的几个点:这个方法要在内容加载 ...
html5手机网站需要加的那些meta标签，手机网站自适应
1.移动网站要加的html5相关meta和标签 a. <meta name="viewport" ...
html中写meta会乱码,网页html代码不可缺少的5个meta标签属性
网页html代码中,meta标签是个非常重要的标签,meta标签可以包含很多属性,而其中有5个是不可缺少的. meta标签属性 1.title title其实不算是meta标签的属性,其本身就是一个标 ...
iframe嵌入页面白屏_封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
在页面中嵌入PDF文件在上一篇<在html页面中嵌入其他页面的方法--零基础自学网页制作>(结尾见目录)中我们学习了如何在页面中嵌入其他页面的操作.今天我们来嵌入一个pdf文件. 其实使 ...

手机网页制作的认识（有关meta标签）

手机网页制作的认识（有关meta标签）相关推荐

最新文章

热门文章