手机网页meta,添加使其兼容各种浏览器
虽然手机不像电脑那样会有各种低版本的浏览器,但写手机端网页也是需要注意的:
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>
<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 网页作者 -->
<meta name="author" content="name, email@gmail.com"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
<!-- iOS 设备 begin -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 添加到主屏后的标题(iOS 6 新增) -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略页面中的数字识别为电话,忽略email识别 -->
<!-- 启用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">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
手机网页meta,添加使其兼容各种浏览器的更多相关文章
- 转载:手机网页制作的认识(有关meta标签)
下面是手机网页的一些认识: 一.<meta name="viewport" id="viewport" content="width=devic ...
- 手机网页制作的认识(有关meta标签)
近日以来一直在看JQuery Mobile 一个手机开发框架,说实话真的很头疼的~~~~ 因为里面有很多的属性.方法和事件~~~ 下面是手机网页的一些认识: 一.<meta name=" ...
- 手机网页的头部meta的相关配置~~
今天使用sublime写手机端网页的时候,发现木有meta的自动生成手机网页的快捷键·~ 然后就去网上巴拉,准备存储一份~~哈哈 一.天猫 <title>天猫触屏版</title&g ...
- meta 标签属性(网站兼容与优化需要)
概要 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务. —— W3School ...
- 常用HTML meta 标签属性(网站兼容与优化需要),meta标签
常用HTML meta 标签属性(网站兼容与优化需要),meta标签 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索 ...
- [书目20131223]Android、iPhone、Windows Phone手机网页及网站设计:最佳实践与设计精粹 - 张亚飞
目录 第I篇 手机版专用网站设计和开发入门篇 第1章 准备创作环境和测试环境 3 1.1 使用Mobile Safari测试网页 4 1.1.1 iOS Simulator安装 5 1.1.2 使用M ...
- 用Meta标签代码让360双核浏览器默认极速模式打开网站不是兼容模式
公司所作的页面在360下打开都会遇到在360下自动跳到360兼容模式引发许多兼容问题,摸索了好久终于在网上找到了怎么解决的方法,详情如下: 其实360给网站开发者设计了一种选择的方法,只要加入一段Me ...
- 兼容多浏览器的网页复制插件(ZeroClipboard)
前言: 常规利用JS编写的网页复制功能是最简单的方法,但是只对IE有效,无法做到兼容其它浏览器,对其他浏览器也就只能弹窗提示用户手动复制了. <script type="text/ja ...
- HTML5 手机网页制作笔记
http://top.css88.com/archives/546 http://www.w3cfuns.com/blog-5470280-5406828.html 最近在卓手机网页,第一次入手.把要 ...
随机推荐
- git add .添加不成功
情景: 我首先在一个有许多文件的文件夹中 git init 创建一个git管理仓库 之后 git add . 之后 git commit -m "提交" 发现提交不成功,文件没 ...
- 利用Knockoutjs对电话号码进行验证
问题来源 最近在项目中前端使用Knockoutjs,验证模块自然也是使用Knockoutjs来进行表单验证了,比较头痛,因为没有使用过Knockoutjs,更加别说要去用它做表单验证了,于是乎恶补了一 ...
- 小记 ArchLinux 下 Typora 无法输入中文
今天准备写一篇 Linux 下的打印机文章,打开 Typora 时我发现不管我怎么设置都无法输入中文. pacman -R typora pacman -S typora 重新安装是无效的,我突然想起 ...
- 重识 PWA 进阶到 workbox3
看到PWA,似曾相识,但又感觉很模糊,于是乎,又重新翻阅文档,学习了一遍,顺便把相关知识学习了一下,比如service worker,workbox3. PWA 概念: 全称:Progressive ...
- 【6】JMicro微服务-服务日志监控
如非授权,禁止用于商业用途,转载请注明出处作者:mynewworldyyl 1. 微服务相关 在前面的1到5节中,总共涉及服务提供者,服务消费者,服务监听服务,发布订阅服务,熔断器服务5种类型的猪 ...
- win10关机之后自动重启(系统更新之后出现这个问题)
最近更新了一把win10之后出现无法关机,关机之后直接又开机,无限循环状态.最近几天没空处理一直是强关笔记本下班的. 今天打了一把命令: shutdown /s /t 0 发现关机正常,本来打算整个脚 ...
- Redis学习系列五Set(集合)
一.简介 Redis中的Set(集合)相当于C#中的HashSet,它内部的键值对时无序的.唯一的.用过Dictionary的都知道,Dictionary都知道,里面的每个键值对肯定是唯一的,因为键不 ...
- 七、Framework类库
1.Framework类库简介 .Net Framework类库包含Framework类库(Framework Class Library,FCL).FCL是一组DLL程序集的统称,其中含有数千个类型 ...
- JavaScript -- Table-方法
-----049-Table-方法.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=&quo ...
- vue子组件传参给父组件
关于父组件传参给子组件,可以看我另一篇文章 教程开始: 我们要实现的效果是:在子组件的Input框输入,父组件中实时更新显示.(也就是把子组件中的数据传给父组件) 一.子组件代码 template部分 ...