1
  1. safari浏览器字体不能自动随网页缩放调整大小

    -webkit-text-size-adjust:100%

  2. 点击<button><input>有灰色透明背景
-webkit-tap-highlight-color:rgba(0,0,0,0);

3.微信、QQ内置浏览器视频自动全屏

非腾讯域名的视频地址都会


4.iphoneX默认网页显示在安全区域内,不全屏

<meta name="viewport" content="viewport-fit=cover">

5.flex布局不兼容,加上前缀也不行(常见于华为或旧版iOS)

display: -webkit-box;

display: box;

display: -webkit-flex;

display: flex;

须声明box和flex两种。

6.Android设置line-height有偏移不垂直居中

原因:

1. 字体不是偶数

2. 用rem单位

解决方案:

   1. 字体变大

   2. 增加父元素,设置diaplay: table-cell; vertical-align: middle

   3. 元素放大两倍,再缩小

   4. line-height: 1; 用padding-top撑起父元素。

   5. 用px单位           

   6. 用图片去显示

7.iOS默认不可点击元素点击事件失效

当委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效

解决方案:

1. 将 click 事件直接绑定到目标元素(即 .target ) 上
2. 将目标元素换成 <a> 或者 <button> 等可点击的元素
3. 给目标元素添加一个空的 onclick=""(<div class="target" onclick="">点击我!</div>)
4. 把 click 改成 touchend 或 touchstart(注意加上preventDefault)
5. 将 click 元素委托到非 document 或 body 的父级元素上
6. 给目标元素加一条样式规则 cursor: pointer; 

最后一种解决方案最简单,推荐。

  1. 部分移动端浏览器不支持space-evenly

解决方案:

用space-arround代替,或通过设置宽度、margin等布局

  1. 移动端(尤其是iOS)一些浏览器具有下拉回弹效果,fixed定位元素不跟着下拉

解决方案:

a. 放弃fixed定位

b. 如导航栏等要实现固定于顶部效果,无需跟着下拉,则用fixed定位

10.微信小程序中,textarea、input元素的maxlength不一定生效。

解决方案:

监听text.length,手动改变文本长度。

11.微信小程序中,输入文字时,输入法待选文字的长度会被计算在内。

解决方案:

  1. 已输入文字的长度取实际长度和限制长度的最小值。
  2. 传给接口的文本用splice剪切需要的长度。

12.iOS手机,微信小程序遮罩、picker组件会被穿透,页面上有多个picker组件时,可能在选择选项时触发其他picker组件弹出。

解决方案:

限制每次只能弹出一个picker,某个picker弹出时,其他picker都是disabled状态,点击无反应。

13.微信小程序,<scroll-view>元素如果用动态生成,则不会触发原生的trigger方法。

14.微信小程序,textarea多行输入框组件,键盘弹出会遮挡输入框。

解决方案:

设置cursor属性,指定光标与键盘的距离。

15.overflow:hidden在手机上失效

在移动端,给body,html设置overflow:hidden后,仍然有滚动条。

浏览器解析<meta name="viewport"> 标签会忽略body,html的overflow属性。

解决方案:

html,body{
 overflow:hidden;
}

body下加一个wrap,

.wrap{
 overflow:hidden;
 position:relative;  /* 重点 */
}

html,body就没有滚动条了。

16.伪元素text-decoration:none失效

元素设置了text-decoration,伪元素::before,::after等的text-decoration:none会被浏览器忽略。

因为伪元素属于元素的内容,所以文本样式会受到影响。

解决方案:

  1. 用和背景色一样的颜色盖住
 a {

  text-decoration: none;

  border-bottom: 1px solid blue;

}

a:after {

  content: "foo";

  border-bottom: 1px solid white; /* same color as the background */

}
  1. 设置为position:absolute,脱离文档流
:after{

   position: absolute;

  display: inline-block;

}
  1. 移动端键盘弹出时,window.innerHeight会变短,导致获取到的视口高度减去了键盘高度

解决方案:

  1. 刚进入时将innerHeight保存到全局
  2. 监听resize事件,及时更新innerHeight的值

(持续更新中……)


池月
70 声望2 粉丝

✨专注前端的程序员