浏览器的兼容问题

浏览器兼容与响应式布局

主流浏览器有5种：IE、chrome、firefox、safari、opera.

 

浏览器兼容

  浏览器私有前缀

1. -moz-            火狐浏览器
2. -webkit-          360、苹果、猎豹、搜狗、QQ、 Chrome等浏览器
3. -o-               Opera/欧朋浏览器
4. -ms-              IE、百度等浏览器

 

 响应式布局方法

1. 百分比布局
2. bootstrap栅格系统
3. Flex 伸缩盒布局

 

1. 媒体查询

综合：流式布局和弹性布局及配合媒体查询 是 响应性布局的最好方式。

 

 媒体查询方法：

1. 屏幕使用screen;设备使用print;手机设备使用device-width
2. Window.screen  命令包含显示设备的信息
3. Screen.height / screen.width 两个命令，用来了解设备的分辨率

Head标签中需要引入：

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

具体含义如下：

1. Width: 控制viewport的大小。如device-width为设备的宽度。
2. Height: 和width相对应，指定高度。
3. initial-scale: 初始缩放比例，页面第一次加载时的缩放比例。
4. maximum-scale 允许用户缩放到的最大比例，范围从0到10.0
5. minimum-scale: 允许用户缩放到的最小比例，范围从0到10.0
6. user-scalable： 用户是否可以手动缩放，值可以是: yes,ture  可以缩放；no,false 不可以缩放；

 

关于Media Query浏览器的兼容性，除了IE8及其以下的浏览器不支持，其他的主流浏览器基本上都支持

 

知名互联网公司 移动端字体大小

类型	基准字体	字体区间
国外官网类	18~16px	大字体 ≈30px 标题字体 22px~18px正文字体 18~14px底部最小字体 14~12px
网购类	14~12px	标题 16px正文 14~12px底部最小字体 12px
国内媒体类	16px	标题 22px~18px正文 18~16px附加信息 12px底部最小字体 12px

 

行高为 1.3、1.35、1.45、1.5

一、关于获取IE浏览器版本的方法：

// IE版本号
function IEVersion() {
  var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
  var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
  var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
  var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
  if (isIE) {
    var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
    reIE.test(userAgent);
    var fIEVersion = parseFloat(RegExp["$1"]);
    if (fIEVersion == 7) {
      return 7;
    } else if (fIEVersion == 8) {
      return 8;
    } else if (fIEVersion == 9) {
      return 9;
    } else if (fIEVersion == 10) {
      return 10;
    } else {
      return 6; //IE版本<=7
    }
  } else if (isEdge) {
    return 'edge'; //edge
  } else if (isIE11) {
    return 11; //IE11  
  } else {
    return -1; //不是ie浏览器
  }
}