关于浏览器兼容问题——还有移动端meta问题
<!DOCTYPE html>
<!--[if lt IE 7]> <html dir="ltr" lang="en-US" class="ie6"> <![endif]-->
<!--[if IE 7]> <html dir="ltr" lang="en-US" class="ie7"> <![endif]-->
<!--[if IE 8]> <html dir="ltr" lang="en-US" class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html dir="ltr" lang="en-US"> <!--<![endif]-->
<!-- BEGIN head -->
<head>
总之,就是在<!DOCTYPE html>与<head>中间的东西加入
<!--[if lt IE 7]> <html dir="ltr" lang="en-US" class="ie6"> <![endif]-->
<!--[if IE 7]> <html dir="ltr" lang="en-US" class="ie7"> <![endif]-->
<!--[if IE 8]> <html dir="ltr" lang="en-US" class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html dir="ltr" lang="en-US"> <!--<![endif]-->
这一大串就OK了,感觉自己棒棒哒~当然可能部分地方还需要修改
还有就是让网页适应移动端加个meta标签:
a、<!-- 强制让文档与设备的宽度保持1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
网页宽度默认等于屏幕宽度(width=device-width),
初始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
b、<!-- 删除默认的苹果工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes">
c、<!-- 在web app应用下状态条(屏幕顶部条)的颜色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
d、<!-- 禁止了把数字转化为拨号链接 -->
<meta name="format-detection" content="telephone=no">
e、<!-- 浏览网站时的小图标 -->
<link rel="shortcut icon" href="http://p.www.xiaomi.com/favicon.ico" type="/image/x-icon">
f、<!-- 添加至主屏时的图片 -->
<link rel="apple-touch-icon-precomposed" href="http://a.tbcdn.cn/mw/s/hi/tbtouch/images/touch-icon.png">
==================
还有一种有趣的方法
创建html5时发现这么一句话,如下:
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
这样写可以达到的效果是如果安装了GCF(Google Chrome Frame 谷歌内嵌浏览器框架的简称),则使用GCF来渲染页面,如果没安装GCF,则使用最高版本的IE内核进行渲染。这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。
关于浏览器兼容问题——还有移动端meta问题的更多相关文章
- 浏览器兼容html头部<meta>标签主要内容详情
<!DOCTYPE html> <head> <meta http-equiv="X-UA-Compatible" content="IE= ...
- Vue(SPA) WebPack模块化打包、SEO优化(Vue SSR服务端同构直出)、全浏览器兼容完整解决方案
白驹过隙,时光荏苒 大概去年这个时候写了angular 结合webpack的一套前端方案,今年此时祭出vue2结合webpack的一套前端方案. 明年的这个时候我又是在做什么... 读在最前面: 1. ...
- CSS在不同浏览器兼容问题,margin偏移/offset溢出等
margin在垂直取值时取最大值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- 移动端meta标签设置
移动端meta标签设置 1.设置当前html文件的字符编码 <meta charset="UTF-8"> 1 2设置浏览器的兼容模式(让IE使用最新的浏览器渲染) &l ...
- 前端编程提高之旅(三)----浏览器兼容之IE6
在爱奇艺实习期间,乐帝主要负责移动端活动页面的制作,因为移动浏览器是随着智能手机兴起的,这就决定了移动端不会重蹈浏览器兼容问题的覆辙.一開始就比較好的支持web标准,而纵观整个互联网行业,移动web开 ...
- CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- CSS-各种cs样式之浏览器兼容处理方式汇总大全(更新中...)
页面模板 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 ...
- 关于浏览器兼容问题及hack写法
浏览器的兼容问题 1.浏览器内核: Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Safari ( ...
- 使用X-UA-Compatible来设置IE浏览器兼容模式(转)
使用X-UA-Compatible来设置IE浏览器兼容模式 文件兼容性用于定义让IE如何编译你的网页.此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式. 前言 ...
随机推荐
- echarts 中国地图实现 省、市、区县三级联动,省级下钻、市级下钻
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 效果如下图: 每天学习一点点 编程PDF电子书.视频教程免费下载:http://www ...
- 【angularjs】使用angularjs模拟淘宝首页-淘宝头条滚动效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- oracle(环境搭建二)
Configuration oracle database Password file(非必要) cd $ORACLE_HOME/dbs/ ls 查看是否有init.ora 创建密码文件 ...
- Error: Cannot find module 'babel-runtime/regenerator'
在做调用阿里云短信接口时遇到的一个问题 错误原因:没有正确安装相应的mmodule 解决办法: 第一步:在package.json中加入依赖label-runtime 第二步:在Terminal中 n ...
- GitHub存储库泄露了API令牌和加密密钥
导读 北卡罗莱纳州立大学(NCSU)学者的一项研究表明,一些GitHub存储库泄漏API令牌和密码密钥.研究人员分析了分布在数百万存储库中的10亿多个GitHub文件.研究人员使用GitHub搜索AP ...
- Windows10下使用python+selenium实现谷歌浏览器的自动控制
第一 谷歌浏览器一直是开发人员最喜欢的浏览器,python爬虫在进行抓包时尤其好用,今天为大家带来python+selenium进行自动化控制的安装教程 安装selenium windows下在cmd ...
- javaScript的原型模式
一.原型模式: 这个只存在于函数中. 我们在创建的每一个函数中都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以有特定类型 的所有实例共享的属性和方法 ...
- 在ASP.NET Core MVC中子类Controller拦截器要先于父类Controller拦截器执行
我们知道在ASP.NET Core MVC中Controller上的Filter拦截器是有执行顺序的,那么如果我们在有继承关系的两个Controller类上,声明同一种类型的Filter拦截器,那么是 ...
- java redis 分页查询数据
package com.liying.tiger.test; import java.util.List; import org.springframework.context.Application ...
- 【原创】JAVA8之妙用Optional解决NPE问题
引言 在文章的开头,先说下NPE问题,NPE问题就是,我们在开发中经常碰到的NullPointerException.假设我们有两个类,他们的UML类图如下图所示 在这种情况下,有如下代码 user. ...