近日以来一直在看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="format-detection" content="telephone=yes"/>

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

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

三、<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 name="apple-mobile-web-app-capable" content="yes">  
<meta name="apple-mobile-web-app-status-bar-style" content="black" />  
<meta http-equiv="content-type" content="text/html; charset=gb2312">  
<meta name="HandheldFriendly" content="True">  
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no">  
<meta name="apple-touch-fullscreen" content="YES" />  
<meta name="viewport" content="width=device-width,maximum-scale=1.0,initial-scale=1.0,user-scalable=no"/>  
<meta name="format-detection" content="telephone=no"/>

转载于:https://www.cnblogs.com/qiandanwu/p/5783835.html

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

  1. 网页制作期末大作业成品 HTML5+CSS大作业——简约个性高逼格博客(5页) web网页制作期末大作业模板

    HTML5+CSS大作业--简约个性高逼格博客(5页) web网页制作期末大作业模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞 ...

  2. 【Web网页制作】影视主题网页制作web页面开发（附源码）

    [写在前面] 其实之前我就写过一篇关于我的家乡的页面,也有不少网友和我私下反馈,让我多出一些关于页面制作的,于是乎我就今天晚上抽出点时间来整理一篇关于影视内容的web页面制作,希望能够得到大家的喜欢. ...

  3. 学生DW静态网页设计——代码质量好-家乡广州 (5页) HTML+CSS+JavaScript web网页制作期末大作业

    HTML5期末大作业:家乡广州网站设计--代码质量好-家乡广州 (5页) HTML+CSS+JavaScript web网页制作期末大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游 ...

  4. html手机单选框,手机移动网页制作：表单输入框、单选框、复选框

    手机移动网页制作:表单输入框.单选框.复选框 本文继前面讲到的WML语言中的文本标签和图像.链接后,接着讲WML语言中的表单内容. 在Html中,表单内容包括输入框.单选框.复选框等等,WML也并不例 ...

  5. 中文之星掌上狂拼手机输入法 网页制作软件

    Welcome to my blog! <script language="javascript" src="http://avss.b15.cnwg.cn/cou ...

  6. web网页制作中常用到的图片格式及jpg,png,gif各自格式的特点

    网页制作中图片格式 常用三种格式(jpg,png,gif) 1jpg图片 是我们最常见的. jpg:可压缩的,有损图片质量的格式.虽然可压缩,它的色彩还是比较丰富. 特点:文件小.色彩丰富. 在网页中 ...

  7. HTML网页结构化框架、meta标签和语义化标签

    1.HTML网页结构化框架代码示例 myhtml.html <!--文档声明,声明当前网页的版本--> <!DOCTYPE html> <!--html的根标签(元素), ...

  8. html网页钩子,HTML5中的meta标签 和 IE浏览器能识别的钩子

    一.meta 标签的使用 1. 使用描述 description属性 增加点击率 2. 设置字符集 3. 重定向和定时刷新功能 4.设备宽度自适应(针对移动设备) content 参数: width ...

  9. web网页制作期末大作业——蓝色的异清轩个人博客(6页) 个人博客模板源码异清轩博客

    HTML5+CSS大作业--蓝色的异清轩个人博客(6页) 个人博客模板源码异清轩博客 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞 ...

最新文章

  1. 爬虫基础（二）之http协议复习
  2. php di,PHP-DI中文文档（基于有道翻译，基本是直接拿过来使用，并没有润色）
  3. 华三交换机mode是什么意思_交换机中相关术语代表什么意思，有必要弄清楚，赶紧收藏...
  4. CreateMainWindow 创建主窗口属性
  5. SAP Spartacus 升级时关于 schematics 的更新
  6. Redis failover过程
  7. UE3 Lightmass 工具
  8. Exchange系列—群集连续复制配置
  9. 解决vcard乱码批量导入outlook
  10. 透明网桥(transparent bridge)
  11. 2015全国硕士研究生计算机考研真题（附答案）
  12. React官方文档教程学习
  13. C——esc按键按下与识别
  14. python import 类如何捕获clrt c_PEP8 python规范神器
  15. Linux 8723be无线网卡,解决rtl8723be无线网卡驱动频繁断网问题
  16. 计算机打字失灵,window_Win10键盘失灵无法打字提示错误代码19该怎么办？，我电脑的键盘无法打字了，显 - phpStudy...
  17. 某微信公众号运营数据分析报告
  18. [LeetCode] 871. Minimum Number of Refueling Stops @ python
  19. C#读写导入导出Excel表格模板（NPOI）
  20. Node.js之 express写后端接口

热门文章

  1. 巡回沙龙_美浮特全国巡回沙龙第一期结束撒花！
  2. python新建一个文件夹需要重新安装模块吗_解决pycharm每次新建项目都要重新安装一些第三方库的问题...
  3. MongoDB学习2——Windows 使用mongo连接数据库
  4. lock_sh 示例_带有示例的Python date __str __（）方法
  5. math.ceil带小数点_JavaScript中带有示例的Math.ceil（）方法
  6. 86. 分隔链表 golang
  7. [C++]vector创建二维数组
  8. C++ 多态之纯虚函数和抽象类01
  9. C++ 对引用的理解5
  10. 设计模式---5（建造者模式的概念及其实现，建造者模式的角色与职责，建造者模式和工厂模式的区别）