手机网站 meta标签

作者: 淡蓝海域 分类: 前端其他 发布时间: 2018-03-29 06:57

在这里我们详细讲解下,利用添加meta标签来做手机网站。

基本在网页头部我们只需添加四个meta标签就可以实现一个手机网站的框架。我一起来看看是哪些meta标签。

1、添加viewport标签

  1. <meta name=“viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0” />

详细属性：

  1. width  —-  viewport的宽度（width=device-width意思是：宽度等于设备宽度）
  2. height ——  viewport的高度（height=device-height意思是：高度等于设备宽度）
  3. initial-scale —– 初始的缩放比例
  4. minimum-scale —– 允许用户缩放到的最小比例
  5. maximum-scale —– 允许用户缩放到的最大比例
  6. user-scalable —– 用户是否可以手动缩放

什么是 Viewport?

viewport 是用户网页的可视区域。

viewport 翻译为中文可以叫做”视区”。

手机浏览器是把页面放在一个虚拟的”窗口”（viewport）中，通常这个虚拟的”窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

设置 Viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
  • height：和 width 相对应，指定高度。
  • initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
  • maximum-scale：允许用户缩放到的最大比例。
  • minimum-scale：允许用户缩放到的最小比例。
  • user-scalable：用户是否可以手动缩放。

2、禁止将数字变为电话号码和邮箱

  1. <meta name=“format-detection” content=“telephone=no” />

一般情况下，IOS和Android系统都会默认某长度内的数字为电话号码，即使不加也是会默认显示为电话的，so，取消这个很有必要！

2.<meta name=”format-detection” content=”email=no”/>

说明：忽略页面中的邮箱格式为邮箱

合起来就是：<meta name=“format-detection” content=“telphone=no, email=no”/>

3、iphone设备中的safari私有meta标签

  1. <meta name=“apple-mobile-web-app-capable” content=“yes” />

<!– 删除默认的苹果工具栏和菜单栏 –>

它表示：允许全屏模式浏览，隐藏浏览器导航栏

4、iphone的私有标签

  1. <meta name=“apple-mobile-web-app-status-bar-style” content=“black”>

它指定的iphone中safari顶端的状态条的样式

默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）

另外还有一个个性化的link标签，它支持用户将网页创建快捷方式到桌面时，其图标变为我们自己定义的图标。比如手机腾讯网上的标签：

  1. <link rel=“apple-touch-icon-precomposed” href=“http://3gimg.qq.com/wap30/info/info5/img/logo_icon.png”>

不过腾讯对这个png图标的命名并不规范，常规我们要求文件名应为 apple-touch-icon.png 或 apple-touch-icon-precomposed.png ，前者的命名iOS会为这个图标自动添加圆角、阴影和高亮覆盖层，后者则不会添加这些效果。

5、name之设置作者姓名及联系方式

说明：设置作者姓名及联系方式

<meta name=”author” contect=”name, xxx@163.com” />

6、其他meta

<!– 声明文档使用的字符编码 –>
<meta charset=’utf-8′>

<!– 优先使用 IE 最新版本和 Chrome –>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>

<!– 页面描述 –>
<meta name=”description” content=”不超过150个字符”/>

<!– 页面关键词 –>
<meta name=”keywords” content=””/>

<!– 搜索引擎抓取 –>
<meta name=”robots” content=”index,follow”/>

<!– 启用360浏览器的极速模式(webkit) –>
<meta name=”renderer” content=”webkit”>

<!– 避免IE使用兼容模式 –>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<!– 不让百度转码 –>
<meta http-equiv=”Cache-Control” content=”no-siteapp” />

<!– 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 –>
<meta name=”HandheldFriendly” content=”true”>

<!– 微软的老式浏览器 –>
<meta name=”MobileOptimized” content=”320″>

<!– uc强制竖屏 –>
<meta name=”screen-orientation” content=”portrait”>
<!– QQ强制竖屏 –>

<meta name=”x5-orientation” content=”portrait”>
<!– UC强制全屏 –>
<meta name=”full-screen” content=”yes”>
<!– QQ强制全屏 –>

<meta name=”x5-fullscreen” content=”true”>
<!– UC应用模式 –>
<meta name=”browsermode” content=”application”>
<!– QQ应用模式 –>
<meta name=”x5-page-mode” content=”app”>

<!– 添加 RSS 订阅 –>
<link rel=”alternate” type=”application/rss+xml” title=”RSS” href=”/rss.xml”/>

<!– 添加 favicon icon –>
<link rel=”shortcut icon” type=”image/ico” href=”/favicon.ico”/>

<!– sns 社交标签 begin –>
<!– 参考微博API –>
<meta property=”og:type” content=”类型” />
<meta property=”og:url” content=”URL地址” />
<meta property=”og:title” content=”标题” />
<meta property=”og:image” content=”图片” />
<meta property=”og:description” content=”描述” />
<!– sns 社交标签 end –>

<!– Windows 8 磁贴颜色 –>
<meta name=”msapplication-TileColor” content=”#000″/>
<!– Windows 8 磁贴图标 –>
<meta name=”msapplication-TileImage” content=”icon.png”/>

<!– windows phone 点击无高光 –>
<meta name=”msapplication-tap-highlight” content=”no”>

 

手机网站基本框架代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset=“utf-8”>
  5. <title>手机网站</title>
  6. <meta name=“keywords” content=“” />
  7. <meta name=“description” content=“” />
  8. <meta name=“viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0” />
  9. <meta name=“format-detection” content=“telephone=no” />
  10. <meta name=“apple-mobile-web-app-capable” content=“yes” />
  11. <meta name=“apple-mobile-web-app-status-bar-style” content=“black”>
  12. <meta name=“author” content=“duanliang, duanliang920.com” />
  13. <style>
  14.     body{font-size:62.5%;font-family:”Microsoft YaHei”,Arial; overflow-x:hidden; overflow-y:auto;}
  15.     .viewport{ max-width:640px; min-width:300px; margin:0 auto;}
  16. </style>
  17. </head>
  18. <body>
  19. <div>
  20.         大家好！我是段亮，这是我的第一个手机网页哦！
  21. </div>
  22. </body>
  23. </html>

合集：

  1. <!–[if lt IE 7 ]><html class=”oldie ie ie6″> <![endif]–>
  2. <!–[if IE 7 ]><html class=”oldie ie ie7″> <![endif]–>
  3. <!–[if IE 8 ]><html class=”ie ie8″> <![endif]–>
  4. <!–[if (gte IE 9)|!(IE)]><!–><html> <!–<![endif]–>
  5. <head>
  6. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
  7. <title></title>
  8. <meta name=“keywords” content=“” />
  9. <meta name=“description” content=“” />
  10. <meta name=“title” content=“” />
  11. <meta name=“author” content=“-06” />
  12. <meta name=“Copyright” content=“” />
  13. <!– 让IE浏览器用最高级内核渲染页面 还有用 Chrome 框架的页面用webkit 内核
  14. ================================================== —>
  15. <meta http-equiv=“X-UA-Compatible” content=“IE=edge,chrome=1”>
  16. <!– IOS6全屏 Chrome高版本全屏
  17. ================================================== —>
  18. <meta name=“apple-mobile-web-app-capable” content=“yes”>
  19. <meta name=“mobile-web-app-capable” content=“yes”>
  20. <!– 让360双核浏览器用webkit内核渲染页面
  21. ================================================== —>
  22. <meta name=“renderer” content=“webkit”>
  23. <!– Mobile Specific Metas
  24. ================================================== —>
  25. <!– !!!注意 minimal-ui 是IOS7.1的新属性，最小化浏览器UI –>
  26. <meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui”>
  27. <meta name=“format-detection” content=“telephone=no”>
  28. <!– CSS
  29. ================================================== —>
  30.     <link href=“/css/reset.css” rel=“stylesheet” type=“text/css”>
  31. <link href=“/css/magicwall.css” rel=“stylesheet” type=“text/css”>
  32. <link  href=“/css/jquery.gridster.css” rel=“stylesheet” type=“text/css”>
  33. <link href=“/css/case.css” rel=“stylesheet” type=“text/css”>
  34. <link href=“/css/case_1280.css” rel=“stylesheet” type=“text/css”>
  35. <link href=“/css/case_1024.css” rel=“stylesheet” type=“text/css”>
  36. <link href=“/css/case_640.css” rel=“stylesheet” type=“text/css”>
  37. <link href=“/css/case_320.css” rel=“stylesheet” type=“text/css”>
  38. <link href=“/css/style_retina.css” rel=“stylesheet” type=“text/css”>
  41. <!–[if lt IE 9]>
  42.         <script src=“http://cdn.bootcss.com/html5shiv/r29/html5.js”></script>
  43. <![endif]–>
  46. <!– Favicons
  47. ================================================== —>
  48. <link rel=“shortcut icon” href=“favicon.ico” >
  49. <!– Android 主屏图标
  50. ================================================== —>
  51. <link rel=“icon” sizes=“196×196” href=“/images/apple-touch-icon-152×152.png”>
  52. <!– IOS 主屏图标
  53. ================================================== —>
  54. <link rel=“apple-touch-icon-precomposed” href=“/images/apple-touch-icon-76×76.png”>
  55. <link rel=“apple-touch-icon-precomposed” sizes=“76×76” href=“/images/apple-touch-icon-76×76.png”>
  56. <link rel=“apple-touch-icon-precomposed” sizes=“120×120” href=“/images/apple-touch-icon-120×120.png”>
  57. <link rel=“apple-touch-icon-precomposed” sizes=“152×152” href=“/images/apple-touch-icon-152×152.png”>
  59. <link rel=“apple-touch-startup-image” href=“/startup-748×1024.jpg”
  60. media=“screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)” >
  61. <link rel=“apple-touch-startup-image” href=“/startup-768×1004.jpg”
  62. media=“screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)” >

 

  1. <!– 启用360浏览器的极速模式(webkit) –>
  2. <meta name=“renderer” content=“webkit”>
  3. <!– 避免IE使用兼容模式 –>
  4. <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
  5. <!– 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 –>
  6. <meta name=“HandheldFriendly” content=“true”>
  7. <!– 微软的老式浏览器 –>
  8. <meta name=“MobileOptimized” content=“320”>
  9. <!– uc强制竖屏 –>
  10. <meta name=“screen-orientation” content=“portrait”>
  11. <!– QQ强制竖屏 –>
  12. <meta name=“x5-orientation” content=“portrait”>
  13. <!– UC强制全屏 –>
  14. <meta name=“full-screen” content=“yes”>
  15. <!– QQ强制全屏 –>
  16. <meta name=“x5-fullscreen” content=“true”>
  17. <!– UC应用模式 –>
  18. <meta name=“browsermode” content=“application”>
  19. <!– QQ应用模式 –>
  20. <meta name=“x5-page-mode” content=“app”>
  21. <!– windows phone 点击无高光 –>
  22. <meta name=“msapplication-tap-highlight” content=“no”>

参考网址：https://blog.csdn.net/kongjiea/article/details/17092413

附：

1、<!– 浏览网站时的小图标 –>
<link rel=”shortcut icon” href=”http://p.www.xiaomi.com/favicon.ico” type=”/image/x-icon”>
2、<!– 添加至主屏时的图片 –>
<link rel=”apple-touch-icon-precomposed” href=”http://a.tbcdn.cn/mw/s/hi/tbtouch/images/touch-icon.png”>

如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！

更多阅读
标签云
android centos css css3 div excel2010 html html5 javascript jquery js linux mootools mysql option php react select shopex sql stripos strpos thinkphp value web xls 两位小数 保留小数 公共函数 公共类 取余运算 取整 四舍五入 大小写转换 字符串 安卓 手册 数组 时间 时间戳 查找 继承 编程 资源 除法精度