【前端】兼容问题汇总


阅读数:   

浏览器

Maximum length of a URL in different browsers

Most web browsers display the URL of a web page in the address bar. There is a limit on the length of the URL basing on the browser we use. Here are the details.

  • Google Chrome –
    Google Chrome allows the maximum length of the URL to be of the size 2MB (2,097,152 characters).

  • Mozilla Firefox –
    In Firefox the length of the URL can be unlimited but practically after 65,536 characters the location bar no longer displays the URL.

  • Edge –
    Edge allows the URL length to be a maximum of 2083 characters but not more than 2048 characters in the path portion of the URL.

  • Opera –
    Opera allows the URL length to be unlimited.

  • Safari –
    The maximum length of URL in Safari is 80000 characters after crossing this limit the page displays an error.

  • Apache(Server) –
    Apache allows the URL length to be a maximum of 4000 characters after which it throws an error message.

各种乱码问题

  1. 文件编码不正确

    可通过vi打开指定文件输入 :set fileencoding 查看文件编码

  2. 上传文件乱码

    见：https://www.xiaogd.net/md/form-encoding-and-mojibake-3-post-method-2

  3. 中间件编码设置不正确

    导致返回的content-type不是需要的编码

    通过该网址有可能还原乱码原始字符：https://wrtools.top/coderepair.php

    可以通过百度的ie（Input Encoding）参数来转换编码查看一个字符对应的编码是啥，或者借用记事本。

    https://www.baidu.com/s?wd=%E4%B8%AD&ie=gb2312

    根据下图可以大致猜测乱码成因：

    img

下载变成打开

检查响应头是否有 Content-Disposition: attachment; filename=xxxx

如果有的话是平台自行阻止了下载，如钉钉、微信等平台。同样ios的Safari浏览器也存在这类问题，见：

apple的建议 ： https://discussions.apple.com…

文件多选上传

WEB浏览器可以进行多选照片，但是手机浏览器中调出相册，只能选一张。（不同APP内也有不同，比如钉钉不支持单选，也就是说移动端内multiple无法有效控制单选多选，大体是APP主要看APP的实现，浏览器则是大多数不支持多选）

1
<input type="file" multiple accept="image/*">

解决方案：

该问题暂无解决方案，需要浏览器产商支持。特定APP下可以通过其提供的jssdk上传文件，比如微信的chooseImage。其他情况H5开发人员可以做的就是支持多选和单选上传逻辑，防止多选了结果只上传了一个文件。

见：https://www.zhihu.com/question/24212111

小米内置浏览器无法触发左右滑动事件

浏览器左右滑动不触发touchmove导致，关闭设置里面手动滑动切换页面后正常，无法从代码角度解决。

HTML

select

一直认为IE11应该和现代浏览器比较接近了，今天打开网站一看，搜索的select默认样式好丑，于是想办法修改他的默认样式。

1612250611152

方法1：使用boostrap插件Collapse等方式

该方式的缺点就是不是表单无法不通过js提交。但是样式兼容性最好。

方法2：CSS重置默认样式

原理是将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片即可。（自测IE11无效，但是可以用在火狐浏览器和谷歌浏览器的样式兼容）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
select {
  /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
  border: solid 1px #000;

  /*很关键：将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;

  /*在选择框的最右侧中间显示小箭头图片*/
  background: url("https://raw.githubusercontent.com/ourjs/static/gh-pages/2015/arrow.png") no-repeat scroll right center transparent;


  /*为下拉小箭头留出一点位置，避免被文字覆盖*/
  padding-right: 14px;
}


/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }

IE并不支持 appearance:none 这个CSS属性，所以用overflow的hidden隐藏的方式去实现。我们需要为其添加一个父容器，容器是用来覆盖小箭头的，然后为select添加一个向右的小偏移或者宽度大于父级元素。设置父级的CSS属性为超出部分不可见，即可覆盖即小箭头。然后再为父级容器添加背景图片即可。overflow: hidden并不能隐藏下拉框的显示。

1
2
3
4
5
6
7
<div id="parent">
  <select>
      <option>what</option>
      <option>the</option>
      <option>hell</option>
  </select>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 #parent {
    background: url('yourimage') no-repeat;
    width: 100px;
    height: 30px;
    overflow: hidden;
}

#parent select {
    background: transparent;
    border: none;
    padding-left: 10px;
    width: 120px;
    height: 100%;
}

object

事情是这样子的，网站里面需要嵌入PDF文件预览，通常，可以借助Flash或者PDF.js等插件，但是更方便的办法是直接使用html的<object>标签或者<embed>标签。

这里，我使用了object标签, chrome和firefox一看没有问题，caniuse中兼容性也满足要求，上线！！

但是随后使用ie11看就出现问题了，PDF显示区域一片空白。这和caniuse里面的支持情况可不一样1612417142188，但是换成 PDF.js 也存在一些其他问题，经过讨论原方案不变，通过下面代码做了下兼容提示。

1612417042967

1
2
3
4
5
<object data="http://example.com/yourpdf.pdf" type="application/pdf" width="95%" height="700px">
    <embed src="http://example.com/yourpdf.pdf">
        <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://example.com/yourpdf.pdf">Download PDF</a>.</p>
    </embed>
</object>

1612417285315

另外，这里需要切换显示pdf，一开始是使用的Angularjs的数据绑定PDF_URL变量，做到变量变化的时候重新加载新的pdf。在其他浏览器可以，但是IE下貌似object的data只能指定一次。 使用 ng-attr-data 在其他浏览器正常，但是IE下就还是无法绑定。因此，为了兼容需要通过dom操作来更新object

style

HTML 中<style>中</style>里面<!-- -->标签是干嘛的?

没什么用，这个主要是针对低版本的浏览器
<!-- -->是html的注释标签，高版本的浏览器会识别<style>标签是样式表，并忽略里面的html注释标签，会解析它，低版本的浏览器有的不识别<style>标签，就会把样式表的内容显示在页面上，所以加上注释标签，这样就算低版本的浏览器不识别<style>标签，也不会把里面的内容显示在页面上。

html5和css3

bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5和css3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap的HTML标准模板</title>   
        <!-- Bootstrap -->
        <link href="/static/css/bootstrap.min.css" rel="stylesheet">
        <!--你自己的样式文件 -->
        <link href="/static/css/your-style.css" rel="stylesheet">        
        <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->        
    </head>
    <body>
        <h1>Hello, world!</h1>

        <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
        <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    </body>
</html>

如果不需要支持IE9以下浏览器，可以用 byebye-ie

1
2
3
<!--[if lt IE 9]>
    <script src="/static/js/byebye-ie/byebye-ie.zhCN.js"></script>
<![endif]-->

CSS

移动端1px问题

问题原因

px是逻辑像素，而设计稿通常是物理像素。在retina屏中，devicePixelRatio可能为2和3，导致1px看上去和2px或者3px一样粗。

解决方案

  1. viewport

    1
    2
    3
    var viewport = document.querySelector("meta[name=viewport]");
    var scale = window.devicePixelRatio ? 1 / window.devicePixelRatio : 1;
    viewport.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

  2. 小数像素

    1
    2
    3
    4
    5
    6
    7
    .border { border: 1px solid #999 }
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        .border { border: 0.5px solid #999 }
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
        .border { border: 0.333333px solid #999 }
    }

    IOS7以下可能不适用，border为小数的时候会不显示

  3. 伪元素缩放

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    /* 2倍屏 */
    @media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
        .border-bottom::after {
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
    }
    /* 3倍屏 */
    @media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
        .border-bottom::after {
            -webkit-transform: scaleY(0.33);
            transform: scaleY(0.33);
        }
    }

根据上面所述，都不是特别完美的解决方案，因此对于新项目且需要全局处理的建议采用方案1，局部特殊处理的可以用方案2或3.

更多见：关于移动端开发1px边框的一些理解及解决办法

扩展阅读：h5 App 适配–分辨率、viewport概念

Javascript

location.origin

1
2
3
4
5
6
var protocol = location.protocol;
var hostname = location.hostname;
var port = location.port ? (':' + location.port) : '';
location.origin = location.origin || protocol + '//' + hostname + port;


IE10及以下不支持，https://caniuse.com/?search=location.origin

dataset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var dataset = {
    getAll: function(elem) { /* 可通过 elem.attributes 过滤，另外全部返回 {key: value} 的key要换成驼峰式 */ }, 
    get: function (elem/* DOM 元素 */, attrName/* 属性名 */) {
        if (!elem || !attrName) return;

        var prefix = 'data-';
        var fullName = prefix + attrName;
        var value = elem.getAttribute(fullName); 

        return value || undefined;
    },
    set: function(elem/* DOM 元素 */, attrName/* 属性名 */, value /* 值 */) {
        if (!elem || !attrName || !value) return;

        var prefix = 'data-';
        var fullName = prefix + attrName;  
        elem.setAttribute(fullName, value);
        return value;
    }
}

var elem = document.getElementById('div-elem')
elem.dataset.id = '1234567890'
elem.dataset.user = 'johndoe'
console.log('elem.dataset.id', elem.dataset.id)
console.log('dataset.get id', dataset.get(elem, 'id'))
console.log('elem.dataset.name', elem.dataset.name = 'ionluo')
console.log('dataset.set name', dataset.set(elem, 'name', 'ionluo'))

IE10及以下不支持

SessionStorage

HTML5中的这个sessionStorage和传统后台的session并不完全是同一个东西，主要是在多个标签页数据是否会共享的问题上的不同。

误区： 只要会话还没有过期，不同标签页之间，相同域名下的sessionStorage是一样的。

正确答案：刷新当前页面，或者通过location.href、window.open、或者通过带target=”_blank”的a标签打开新标签，之前的sessionStorage还在，但是如果你是主动打开一个新窗口或者新标签，新窗口（或标签）的sessionStorage的增删改和旧窗口已经没有关系了，如果只是在当前标签内跳转新页面（或者刷新），数据还会保留（前提当然是同域）。

摘自：https://mp.weixin.qq.com/s/wogEdUj9vPTLBzG_Xi1OKw

但是，今天使用火狐浏览器，通过a标签新页面打开，发现新页面已经无法看到sessionStorage了。

image-20210312153120056

我的FireFox版本：

image-20210312153328735

所以，以后使用sessionStorage时，只要打开新窗口就要特别注意了，新旧窗口数据不会互相同步。 需要新窗口打开建议使用localStorage。

IOS

输入框被键盘挡住

问题复现

img

懒得截图，借用下网上的图片~~~

解决方法

  • 方法1

只适用输入框在页面底部的情况

1
2
3
4
// iOS UC浏览器下升起键盘后将页面向上滚动键盘的高度，避免输入框被键盘挡住
setTimeout(function() {
    document.body.scrollTop = document.body.scrollHeight
}, 300)
  • 方法2

介错因子不好设置

1
2
3
4
5
6
7
const normalInnerHeigth = window.innerHeight
const factor = 20
window.addEventListener('resize', function() {
    const resizeInnerHeigth = window.innerHeight
    const keyboardHeight = normalInnerHeigth - resizeInnerHeigth + factor
    window.scrollTo(0, keyboardHeight)
})

上面在我的ios机子上发现短时间内resize触发了两次，为什么会出现这种情况未知，除非ios是有让输入框聚焦上移的，但是移动的位置不正确（测试反馈的视频中，输入框一直没有动过，但是我的UC浏览器是输入框会动的，但是动的位置不正确）。表现是：第一次resize后，输入框显示正常，第二次，输入框掉下去了。解决方法可以利用防抖操作，如下：

resize 2次问题是ionic自带的键盘处理事件导致

1
2
3
4
5
6
7
8
9
10
const normalInnerHeigth = window.innerHeight
const factor = 20
window.addEventListener('resize', function() {
if (resizeTimer) clearTimeout(resizeTimer)
resizeTimer = setTimeout(function() {
  const resizeInnerHeigth = window.innerHeight
  const keyboardHeight = normalInnerHeigth - resizeInnerHeigth + factor
  window.scrollTo(0, keyboardHeight)
}, 300)
})

参考文档

移动端固定输入框在底部会被键盘遮挡的解决方法(必看篇)

扩展

在APP内嵌的时候，发现ios的uiwebview（ios13后不支持转为wkwebview）下，也存在输入框被遮挡问题（输入框通过fixed固定在页面底部，输入框的父元素通过position:absolute各个方向为0固定到全屏）

导致原因是ios下的transform特性影响使得所有定位基于父元素高度，而键盘打开时文档高度被拉大（似乎是uiwebview的问题），我找到下面2篇资料，但是没有很好的解释文档高度被拉大的原因

  1. transform与position:fixed的那些恩怨
  2. iOS 12 / UIWebView 键盘覆盖页面底部的 INPUT 元素

总之，有2个方案可以解决该问题

  1. 给带有transform样式的元素在键盘打开的时候添加 transform: none !important；样式（不能直接添加，否则会影响动画和滚动）
  2. 用js计算到页面的高度，强制固定它

模态框滑屏联动、ios橡皮筋

通常出现在移动设备上

滑屏联动，就是在上层窗口［浮层］滚动，下层内容区域跟随一起滚动。

ios橡皮筋，就是当页面拉到尽头的时候还能再继续拉动，露出浏览器的底色，松手会回弹回去。

1
2
3
4
5
6
7
// iOS UC浏览器下滑屏联动和橡皮筋问题
<div ng-touchstart="handleTouchStart($event)"></div>

// angularjs  #utils是一个工具类 这里会导致页面无法滑动返回上一页在ios上
$scope.handleTouchStart = function (evt) {
    $utils.$detector.os.name == 'ios' && evt.preventDefault()
}

https://www.specialagentsqueaky.com/zh/blog-post/ssy5i7qw/2015-06-10-six-things-i-learnt-about-ios-rubberband-overflow-scrolling/

参考文档

解决移动端模态框交互问题：滑屏联动、ios橡皮筋

解决：framework 7 在IOS上，出现模态框的时候，在模态框上滑动，底部页面也跟着滑动的问题

移动端踩坑记录之ios系统橡皮筋效果处理

移动端iOS阻止橡皮筋效果

日期格式问题

new Date('2020-11-12 00:00:00') 在ios中会为NAN

解决方案：用new Date('2020/11/12 00:00:00')的日期格式，或者写个正则转换 - 为 /

注意这种格式在ios中 也会报错， “2019/12/30 16:46:20.1”

1
new Date("2019/12/30 16:46:20.1") ; // 值为null

解决办法：

示例：2019-12-30T16:46:20.1=>2015-12-31 00:00:00=>2015-12-31 00-00-00=>“2019”, “12”, “30”, “16”, “46”, “20.1”=>最后new Date()就不会报错

1
2
3
var join_date= joinTime.replace(/T/g,' ').replace(/[ :]/g, "-").split("-");
join_date = new Date(join_date[0], join_date[1]-1, join_date[2], join_date[3], join_date[4], join_date[5] );
new Date(join_date).getTime()

电话号码高亮显示

在 IOS Safari 浏览器上会对那些看起来是电话号码的数字处理为电话链接，解决方法

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

滑动动画和ionic的动画冲突

参考：
https://github.com/RedTeapot/Viewjs/issues/4
https://doc.view-js.com/main.-shi-tu-qie-huan-dong-hua

  1. 滑动返回/前进动画，是safari自带的特性，无法禁止；
  2. 浏览器执行的前进或后退，无法区分是通过滑动手势触发的，还是通过点击底部按钮触发的；开发者可通过区分 “由应用驱动的切换” 和 “由浏览器驱动的切换”，在“切换动作由浏览器驱动”场景下不呈现动画，而在“切换动作由应用驱动”的场景下呈现动画。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
app.run(['$state', '$ionicHistory', '$rootScope', 'LocalStorage', '$ionicViewSwitcher', '$utils', function($state, $ionicHistory, $rootScope, LocalStorage, $ionicViewSwitcher, $utils) {
  // 手动设置切换页面动画规则
  const setSwitchAnimationRule = function(toState, toParams, fromState, fromParams) {
    // ...
  }

  // 由于无法判断用户是通过浏览器触发的，因此只能给客户端触发添加标记(将结果挂载到全局history对象上)
  const setSwitchTrigger = function() {
    const stateGo = $state.go
    const ionicHistoryGoBack = $ionicHistory.goBack
    const historyGo = history.go
    const historyBack = history.back
    const historyForward = history.forward

    /** 视图切换触发器：浏览器(navigator) 应用程序(app) */
    history.SWITCHTRIGGER_NAVIGATOR = 'navigator'
    $state.go = function() {
      history.SWITCHTRIGGER_NAVIGATOR = 'app'
      stateGo.apply(null, arguments)
    }
    $ionicHistory.goBack = function() {
      history.SWITCHTRIGGER_NAVIGATOR = 'app'
      ionicHistoryGoBack.apply(null, arguments)
    }
    history.go = function() {
      history.SWITCHTRIGGER_NAVIGATOR = 'app'
      historyGo.apply(null, arguments)
    }
    history.back = function() {
      history.SWITCHTRIGGER_NAVIGATOR = 'app'
      historyBack.apply(null, arguments)
    }
    history.forward = function() {
      history.SWITCHTRIGGER_NAVIGATOR = 'app'
      historyForward.apply(null, arguments)
    }
  }

  setSwitchTrigger()

  $rootScope.$on('$stateChangeStart', function (e, toState, toParams, fromState, fromParams) {
    if ($utils.$detector.os.name == 'ios' && history.SWITCHTRIGGER_NAVIGATOR === 'navigator') {
      // 禁止动画
      $ionicViewSwitcher.nextDirection(['none'])
    } else {
      // 展示动画
      setSwitchAnimationRule(toState, toParams, fromState, fromParams)
      history.SWITCHTRIGGER_NAVIGATOR = 'navigator'
    }
  })
}])

放大模糊问题

在做缩放功能的时候，ios会遇到放到后模糊问题

复现步骤：选取一张带文字的高分辨率图片，通过transform: scale3d(10, 10)后在ios存在模糊

解决办法：ios下不使用transform：3d，改成 transform: scale(10, 10)

参考：

为何使用了 css3 translate3d 会导致显示模糊？

为什么很多2d CSS变换要使用transform:translate3d(x,x,0)？

transform:translate3d(0,0,0)可以触发硬件加速，
这个属性都会开启GPU硬件加速模式，从而让浏览器在渲染动画时从CPU转向GPU

刘海屏适配

主要就是 iphonex

1
2
3
4
5
6
7
<meta name="viewport" content="...,viewport-fit=cover" />
body{
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

部分需要判断的情况可以用 @supports not(constant(safe-area-inset-bottom)){ ... } 检测

更多可见：https://juejin.cn/post/6963941148163473445

双击放大

Safari浏览器特性，目前没有办法禁止

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/dbbab9bd.html
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！
知识共享许可协议

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true