移动端微信页面兼容性问题集合

发表于2024年4月28日2024年4月28日作者 jiukeshuju

前言：这里移动端主要指 hybrid app 中的H5页面。app 中对页面样式和功能的需求会更精细一点。

1、适配：手机端的尺寸多样，3.5英寸的 iPhone4应该是最小的，只要考虑兼容到iPhone4 就可以了。（iPhone4的用户量现在也很少，有时只要兼容到iPhone5 就可以了）

哪怕有比这个尺寸小的，都不是多人使用的。可能是个位数，甚至是没有。为数不多的几款这样的手机处理能力也很低下。 https://digi.tech.qq.com/a/20150312/011872.htm#p=1

iPhone4 使用情况：iPhone4的系统，现在的很多软件都运行不了。 https://www.pc841.com/shouji/iPhone/19249.html(系统升级后也会有问题，大部分用户是不会去升级的) 或 https://t.cj.sina.com.cn/articles/view/2972527830/b12d2cd60010084gl

总结：

rem + 媒体查询适配（rem基本可以适配大部分的移动端的适配，解决不了的使用媒体查询基本可以解决），重点熟练下媒体查询手机是用height还是device-height来查询的。有的手机，下面有一条黑色的手机按键，此时的device-height有没有包含这块高度。
注：不同手机宽度基本没什么适配的，rem基本就解决了。主要是针对需要一屏显示的页面，高度差距太大，用rem基本没什么效果。

2、 JS 呼起和隐藏键盘（默认是需要用户点击输入框才能呼起）：智能机的键盘都是软键盘。应用中有呼起键盘和隐藏键盘的需求。

呼起键盘：进入搜索页,要求键盘拉起。主要聚焦到input框就可以。（安卓上没有问题，ios上无效）

    this.$refs.input.focus() // 在一个demo上安卓 和 ios都有效，但是正式项目中，ios中无效

隐藏键盘：通过给input标签，设置 readonly 属性就可以使键盘收起来了。（安卓上没有问题，ios上无效）

    <input type="text" ref="input" :readonly="readonly">

或，下面的方法安卓和 ios上都有效

      this.$refs.input.blur()

3、软键盘呼起引起的兼容性问题：

a、会使webview高度变小（这里就要求body最好设置一个最小的高度为没有键盘时的高度），并且 fixed定位元素跟着键盘上移（安卓的问题）：

问题原因：

安卓手机：同一个手机，H5页面的视口高度在键盘拉起和隐藏时，不一样的。拉起时，键盘部分的高度变成原生的内容了，H5容器高度就变小了。（H5页面本身的高度是不变的）

一般情况这个都不影响，但是如果底部有fixed定位的话。键盘拉起时，会把这块内容也移上去的，需要做一个判断进行隐藏（这个隐藏必须是针对对安卓机，ios机上不能隐藏。ios上也隐藏了，键盘）。

ios手机：更不正常，键盘弹出不影响H5容器的大小变化的，即clientHeight的大小不变，但是却出现了滚动（如果clientHeight同步变小，可以理解为变成了一个小屏的容器。但是ios这样，只是把滚动条的范围变小了；

滚动条到底了，页面的底部在键盘的上了。键盘遮挡的部分也是属于clientHeight，这一部分的高度，凭空给H5页面了）。总结起来就，ios中键盘弹起，会给H5页面的高度增加了一个键盘的高度。

参考哪些高度发生的变化 https://blog.csdn.net/weixin_34163553/article/details/88686238

个人看法：键盘弹出，可以这样理解为h5的底板的大小就是webview的大小，包括键盘。底板上一张画布，画布高度可以被撑高，html、body等元素是固定在画布上的。浏览器中页面的滚动的跟着画布滚动的。

安卓上，画布的最小高度是底板不包括键盘的高度； ios上，画布的最小高度是低板的高度加上键盘的高度。（css无非操作画布的属性）

解决问题：

页面只能是一屏的：这个要考虑自适应。键盘呼起，webview的高度变小了。使用 absolute 定位，bottom 设置，定位参考的元素高度不能受webview高度的影响（给body设置一个最小高度，开始就通过js获取）；或者使用top设置高度。

如果，要考虑所有手机中底部的按钮必须离底部相同的距离。这个可能就要使用js获取没有键盘时屏幕的高度。然后把定位参考元素高度设置为这个值。

页面可以滚动：这个比较简单，没有键盘时，页面高度已经大于容器的高度了。呼起键盘后还是滚动的。没有任何的问题。

b、软件盘唤起，在表单外滑动，软键盘不关闭，点击才会关闭（这点表现，两者是一样的，没有兼容性问题，记录下这个特性）。

c、软件盘的关闭方法，表单失去焦点 / 软件盘上的关闭按钮（这点表现，两者是一样的，没有兼容性问题，记录下这个特性）

d、点击软键盘上的关闭按钮、安卓手机不会触发表单的 blur 事件，ios可以。（安卓的问题）

需要软件盘关闭时执行代码，在安卓上就需要做兼容处理。（解决安卓的一些兼容性问题，必须要在软键盘关闭时执行。如键盘拉起时，会把底部fixed元素移上去的，需要做一个判断进行隐藏；关闭软键盘时，再显示）

e、软键盘唤起时fixed 元素失效（ios的问题）：如下说明

4、软键盘呼起时fixed失效（fixed+input，ios的问题）：（有一个inobounce插件，可以直接解决这个问题。功能上相当于使得画布的高度，始终等于键盘上面到顶部的高度。不管键盘有没有出来都这样。有时间可以看下源码）

a、顶部 fixed元素，input框在顶部：点击这个input框，fixed虽然失效了，但是页面不会滚动。fiexd元素会滚动是因为软键盘的弹出，fixed失效了（或变成了absolute），只要input失去焦点时，立刻把键盘关闭，fixed元素就没有滚动的机会。

这样就可以解决fixed无效的问题了。

中间部分有滚动部分的解决方案，有效 https://www.iteye.com/blog/570109268-2406086（解决了中间滚动部分的高度，不会引起画布的滚动。画布的滚动，还是会使fixed滚动，这个解决方法就是上面说的失去焦点，隐藏键盘）

b、底部 fixed元素，input框在底部：这个input输入框，点击这个输入框，页面都会向上滚动的。input框始终在键盘上面，键盘关闭，滚上去的页面也不会滚下来。

这个当表单失去焦点时（或触发键盘隐藏事件时），让页面滚动到之前的位置就可以解决：

　　　document.documentElement.scrollTop = 100; // 这个值是弹出键盘前的位置

inobounce 禁止IOS H5的滑动回弹：https://blog.csdn.net/weixin_30610755/article/details/95260237

5、解决页面，返回时重复的问题（重要，app中返回是经常会用到的，所以浏览器历史记录需要页面控制下。页面前进或回退时，url只是参数的改变，页面是不刷新的）

A（列表页） =》 B（详情页，B中有跳到A页面的按钮）：列表A1 =》 B 点击跳到A的按钮 =》

列表A2 =》B。这个时候回退时，B=》A=》B=>A 会出现不断重复的问题

解决方案：使用vue路由的 vm.$router.replace() 方法跳转，或原生的 location.replace(URL)

6、input中占位文字，无法上下居中对齐（应该是字体小于12px，引起的问题）。

7、ios监听软键盘确认按钮：会无效（那个确认按钮会变化为换行按钮，换行时，监听key=13是对的。变成确认时，监听不了key=13的这个键。【猜测可能同一个键，确认的键盘码不是13】）

解决办法： type=”search” 的输入控件，会使改变软键盘确认按钮的文字变成搜索（且键盘码都是13）。https://blog.csdn.net/sinat_24070543/article/details/53423274

<form action=""> // form 标签必须加
   <input v-model="wordName" type="search" placeholder="输入垃圾名称搜一搜" @input="inputText" ref="input"/>
</form>

这个方法可以不用监听key=13事件，直接监听form的 submit 事件同样可以监听确认按钮。

（项目中是在搜索框右边加一个搜索按钮，不使用软键盘上的确认按钮）

另：type=search表单，输入文字后，右边会有一个删除文字按钮的。解决方案：https://www.cnblogs.com/xiaoshen666/p/10772858.html

input[type="search"]::-webkit-search-cancel-button{
    -webkit-appearance: none;
}

8、小高度标签内单行文本垂直居中偏上的解决方案（安卓设备上）：https://blog.csdn.net/zhanghuanhuan1/article/details/80339610 或 https://blog.csdn.net/liming911911/article/details/75389188（推荐）

原因（个人猜测）：移动端是支持12px以下的字体的。安卓上小于12px的字体，字体会溢出标签一点。亲测，如下图，设置了居中的样式，字体设置为10px，字体溢出他的包含标签sapn。即，

浏览器12px以下的字体以12px显示；移动端小于12px的字体，也可以正常显示，但是排版有点小问题（会上移）。

常规的居中方案都没有用的，使用scale可以近似解决，但是不够完美。目前没有其他的可行方法。或者使用媒体查询，小于12px的尺寸，就以12px显示。折腾了好久，找不到好的办法

9、ios上vue框架中返回 keep-alive 的页面(这个页面比较长，有滚动。滚到顶部，进入下一个页面)，会出现白屏（被什么东西遮挡住了）。手轻轻滑动下，遮挡层就消失了。

原因及解决方法：https://blog.csdn.net/m0_38069630/article/details/80573283 （公司的项目中因为是多人开发，不好动html, body的属性。所以没用这个解决方案，只是不用 keep-alive 了）

10、ios中 h5页面输入框点击空白处不会失去焦点软键盘不会收起（重要）：

解决方案：https://www.cnblogs.com/gd-dql/p/7476330.html（亲测有效，里面使用touchend触发，改成touchstart更好。有时间整理下，把里面的定时去掉）

11、ios-H5 中，不过页面的高度是多少(html,body设置为50px，只有一个input标签)，只要键盘弹出，页面就一定会滚动。通过上面的方法，input失去焦点马上隐藏键盘。这样活动的时候键盘隐藏，页面就不会滚动了。

但是，在input内部滑动，还是会带动页面滚动的，给input标签添加一个touchmove阻止默认事件。就完美了

document.getElementById('input').addEventListener("touchmove",function(event){
    event.preventDefault()
},false)

（直接让页面不滚动，暂时没有找到解决方案，因为html，body的高度根本没有超出键盘的范围。我想应该是有直接的解决办法的，百度H5页面，不知道是怎么解决的，有时间研究下）

12、禁止 ios 页面上下滚动回弹（橡皮筋效果）：没有橡皮筋效果，就不会出现fixed失效的问题。

解决方案1、使用 inobounce.js 插件（亲测有效）。但是整个页面都不能滑动了，有溢出的屏幕的元素也不能滑动的。

如果有需要滑动的元素，需要设置一个height或max-height,还有overflow: auto; -webkit-overflow-scrolling: touch; https://blog.csdn.net/weixin_30610755/article/details/95260237

解决方案2、参考 https://blog.csdn.net/m0_37068028/article/details/80183781 （亲测，两个方案都有效）或 https://blog.csdn.net/qq_40717869/article/details/81749970（和前面的一样，只是第二种方案说的更详细）

　　　　　 里面的方案1：【纯 css 实现】

<template>
  <div class="container">
    <div>
      <p v-for="item in 200" :key="item">测试测试测试测试测试测试</p>
    </div>
  </div>
</template>

<style scoped>
.container {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: scroll;
}
</style>

里面的方案2：【使用js，阻止 body 默认的 touchmove事件，会导致整个页面的的上下滑动被禁止。还要解决里面内容的上下滑动问题】

目前测试这个方案还没有成功，后续会继续验证。

说明：通过阅读 inobounce.js 的源码（源码代码量很少），发现原理就是使用window代理屏幕上的 touchmove 事件( window.addEventListener)。判断当前触发的对象是非滚动区域，则阻止事件的默认行为；滚动区域，不阻止事件。

具体实现，插件中考虑的比较全面，比较复杂。直接使用插件是最方便的。

解决方案3【完美，但是局限于自己的app】：ios 原生的 app 是可以禁用 webview 的回弹效果的。但是，在第三方的app 中运行，如微信中运行H5。我们是无法让原生app 禁用橡皮筋效果。只能从 H5 本身考虑解决方案。

13、js没有监听手机端软键盘弹出 / 关闭事件，可以封装一个这样的函数。https://www.cnblogs.com/wind-wang/p/10711259.html

安卓和 ios 对软键盘关闭的行为是不一样的。安卓中软键盘关闭，webview高度变化（blur事件不一定触发）；ios中软键盘关闭，触发 blur事件【或focusout】(webview高度没有变化)。

14、 fixed的遮罩层上面可以滚动，下面内容禁止滚动。（有时间再单独研究下，fiexd遮罩层上的事件，如点击，滚动对下面的内容的影响）

解决方案：移动端开发，body内的元素，最外层的标签要设置一个高度（一般是容器的高度100vh），溢出属性设置滚动。不要让body的高度超过100vh了，不然 fixed的遮罩层上面滚动，下面的内容一会滚动。处理起来比较麻烦。

亲测问题：在fixed层上使用vue的 @touchmove.prevent 阻止默认事件，结果上下两层的滚动都禁止了；使用 @touchmove.stop 阻止冒泡事件，结果无效。

问题分析：

a、body 的高度超过容器高度，body是比较特殊的标签。fixe层的touchmove事件，会导致body滚动。

b、非 body的标签，如 div标签是一个溢出滚动的标签，其内的一个标签作为 fixed遮罩层，则遮罩层内的内容滚动，不会触发这个div标签的高度。（个人猜测，遮罩层虽然在div标签内，但是已经脱离标准文档流，事件上于div已经没有关系）

c、body是比较特殊的标签，fixed遮罩层内的 touchmove 还是会到 body上的。

15、 IOS获取短信验证码–自动填充被复制两遍问题：参考链接

说明：测试测出这个bug，自己测试一直没复现出来。可能触发机制不是很准确。

16、video标签，在安卓手机不能自动播放： https://blog.csdn.net/weixin_34037173/article/details/88718114

在安卓的容器（webview）中，视频播放需要点击两次，即播放-暂停-播放，才能开始播放。（暂时没有找到解决方案）

17、移动端 input[type=file] 标签本地文件、拍照、录像上传的兼容性问题：参考自己的另外一篇博客，https://www.cnblogs.com/wfblog/p/12887737.html

18、安卓中video播放完视频后，会自动跳到，视屏广告的内容上去。https://blog.csdn.net/Dream_Weave/article/details/103095517

19、移动端1像素边框问题【1px问题】：https://www.jianshu.com/p/fa670b737a29 或 https://www.jianshu.com/p/9dcdeedf2097

注意：1、移动端1像素问题，和视口大小没有关系。css中的像素是逻辑像素。

2、最后展示到屏幕上的是物理像素实现的，即逻辑像素经过计算，转化为物理像素显示。

3、0.5px是有兼容性问题的，安卓手机会把 0.5px 处理成 1px，显示还是比较粗的。

产生原因：在retina屏中，1个逻辑像素，可能需要2个或3个物理像素来显示。而px已经是css最小的逻辑像素单位，css中0.5像素会处理成0px。

所以无法实现1px的物理像素渲染。

【注意：css中的px，是渲染在布局视口上的。是布局视口无法正常处理0.5px，布局视口的1px是可以渲染出0.5px的物理像素的】

解决方法：

1、0.5px 方案：可能手机厂商知道存在这个问题，所以现在有的手机已经可以实现0.5px渲染1px的物理像素了。

在IOS8+，苹果系列都已经支持0.5px了，可以借助媒体查询来处理。

2、最佳解决方案：transform: scaleY(0.5); 【在一个方向缩小一半】

3、viewport + rem：【不推荐，这种方法，会给规范的UI组件库带来样式错乱的问题。https://www.zhihu.com/question/270207480】

<meta name="viewport" content="width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

原理：将布局视口放大，布局视口最后还是要全部呈现到屏幕宽度的【即缩小】。如dpr=2时，这时候 css 中1px就是布局视口的1px，

布局视口中的1px会被处理成 0.5px对应的物理像素进行渲染。

总结：安卓和ios的兼容性，主要的问题，还是软件键盘引起的。所以两者关于软键盘的处理一定要让他们尽可能的保持一致。如下要做到一致：

a、输入框，聚焦时弹出软件盘。失去焦点时，隐藏软件盘（ios需要处理的）。

b、ios 的橡皮筋效果一定要禁掉（使用 inobounce 插件）。

c、ios 和安卓两者对软键盘关闭的判断的逻辑不同（软键盘关闭时，执行代码这个功能是一定会用到的）。现在的手机不是ios就是安卓手机，可以把这两段代码封装在一个方法里，变成一个软键盘关闭的事件（实际开发中，一般只是对一种情况做出处理）。

        if(isIOS){ // 在 ios 中执行下面监听事件，捕获 软键盘关闭事件。（isIOS 通过获取 navigator.userAgent就可以判断）
            window.addEventListener('focusin', () => {  // 键盘弹出事件处理
                alert("iphone 键盘弹出事件处理")
            });
            window.addEventListener('focusout', () => {  // 键盘收起事件处理
                alert("iphone 键盘收起事件处理")
            });
        }

        if(isAndroid){ // 在 android 中执行下面监听事件，捕获 软键盘关闭事件
            const innerHeight = window.innerHeight;
            window.addEventListener('resize', () => {
                const newInnerHeight = window.innerHeight;
                if (innerHeight > newInnerHeight) {  // 键盘弹出事件处理
                    alert("android 键盘弹窗事件");
                } else {  // 键盘收起事件处理
                    alert("android 键盘收起事件处理")
                }
            });
        }

感悟：1、如果不用输入框，基本没有什么兼容性问题。css的兼容性问题也基本没有，就几个默认样式的区别；没有软键盘，ios回弹效果也没什么影响，可以不做处理。

2、上面讲的安卓和ios上的兼容性问题，都是webview内核的兼容性问题。hybrid-app中SDK方法也会有兼容问题的，这种bug完全就是安卓和ios软件开发者没有(或无法)统一引起的。一般安卓和ios是不同的人开发的。

同样的微信软件，在ios上和安卓上清除缓存的功能都是不一样的。微信JS-SDK，在处理分享链接链接也是有差异。自己公司开发是“杭州办事服务”APP，JS调用原生的语音功能也存在兼容性问题。

文章阅读

1、移动端项目实战心得：参考链接

移动端事件： https://www.jianshu.com/p/201518903985（原生的没有 tap 和 swipe 事件）

1、touch事件：

touchstart：手指触摸到屏幕会触发

touchmove：当手指在屏幕上移动时，会触发

touchend：当手指离开屏幕时，会触发。

touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件。（在浏览器的模拟器中触发touchcancel事件，Alt+Tab键）

注意：使用 touchend 事件时，一定要考虑touchcancel事件。比如，语音功能。按下说话，突然弹出语音权限未开。这个时候手指拿开就不会触发touchend事件了，touch事件被打断了，屏幕上一直是touchstart的状态。

必须加上 touchcancel 事件，补充手指拿开后的页面状态。

一、浏览器

【UC浏览器】video标签脱离文档流

场景：<video>标签的父元素(祖辈元素)设置transform样式后，<video>标签会脱离文档流。

测试环境：UC浏览器 8.7/8.6 + Android 2.3/4.0 。

Demo：http://t.cn/zj3xiyu

解决方案：不使用transform属性。translate用top、margin等属性替代。

【UC浏览器】video标签总在最前

场景：<video>标签总是在最前（可以理解为video标签的z-index属性是Max）。

测试环境：UC浏览器 8.7/8.6 + Android 2.3/4.0 。

【UC浏览器】position:fixed 属性在UC浏览器的奇葩现象

场景：设置了position: fixed 的元素会遮挡z-index值更高的同辈元素。

在8.6的版本,这个情况直接出现。

在8.7之后的版本,当同辈元素的height大于713这个「神奇」的数值时,才会被遮挡。

测试环境：UC浏览器 8.8_beta/8.7/8.6 + Android 2.3/4.0 。

Demo：http://t.cn/zYLTSg6

【QQ手机浏览器】不支持HttpOnly

场景：带有HttpOnly属性的Cookie，在QQ手机浏览器版本从4.0开始失效。JavaScript可以直接读取设置了HttpOnly的Cookie值。

测试环境：QQ手机浏览器 4.0/4.1/4.2 + Android 4.0 。

【MIUI原生浏览器】浏览器地址栏hash不改变

场景：location.hash 被赋值后，地址栏的地址不会改变。

但实际上 location.href 已经更新了，通过JavaScript可以顺利获取到更新后的地址。

虽然不影响正常访问，但用户无法将访问过程中改变hash后的地址存为书签。

测试环境：MIUI 4.0

【Chrome Mobile】fixed元素无法点击

场景：父元素设置position: fixed;

子元素设置position: absolute;

此时，如果父元素/子元素还设置了overflow: hidden 则出现“父元素遮挡该子元素“的bug。

视觉(view)层并没有出现遮挡，只是无法触发绑定在该子元素上的事件。可理解为：「看到点不到」。

补充：页面往下滚动，触发position: fixed;的特性时，才会出现这个bug，在最顶不会出现。

测试平台：小米1S，Android4.0的Chrome18

demo： http://maplejan.sinaapp.com/demo/fixed_chromemobile.html

解决办法：把父元素和子元素的overflow: hidden去掉。

二、 css部分

body如果设置height:100%;overflow:hidden是依然可以滑动的，如果需禁止，要再加一层div设置 height:100%加overflow：hidden（html,body加height:100%），这样元素超出body的高度也不能滑动了。
或者同时给html，body加height:100%;overflow:hidden
meta标签
<meta name=”viewport” content=”width=device-width,initial-scale=1,user-scalable=no”/>移动端加上这个标签才是真正的自适应，不加的话，假如你把一个980px宽度(手机端常规是980)的PC网页放在手机上显示，倒也能正常显示不出现滚动条，不过是移动设备对页面做了缩小优化，所以字体等都相应缩小了（980px是相对于手机像素的，我的是超过1000px多一些就出现滚动条了，这个没具体研究）。

关于 initial-scale=1 ，这个参照iphone5的尺寸320*568，如果你页面按照640*1136做的话，scale就设为0.5

<meta content=”yes” name=”apple-mobile-web-app-capable”> IOS中safari允许全屏浏览

<meta content=”black” name=”apple-mobile-web-app-status-bar-style”> IOS中Safari顶端状态条样式

<meta content=”telephone=no” name=”format-detection”> 忽略将数字变为电话号码<meta content=”email=no” name=”format-detection”> 忽略识别email
做全屏显示的图片时，一般为了兼容大部分的手机，图片尺寸一般设为640*960（我是觉得这个尺寸好，也看不少的图片也是这个尺寸，视情况而定）
去除webkit的滚动条
element::-webkit-scrollbar{

display: none;

}
去除button在ios上的默认样式
-webkit-appearance: none;

border-radius: 0
不想让按钮touch时有蓝色的边框 -webkit-tap-highlight-color:rgba(0,0,0,0);
如果要用到fixed譬如导航等，可以用absolute达到一样的效果，把body设为100%；将元素absolute到body上即可，不过这样不能让body滚动，如果需要有滚动的地方，就放在div中滚动
在移动端做动画效果的话，如果通过改变绝对定位的top，或者margin的话做出来的效果很差，很不流畅，而使用css3的transition或者animation的效果将会非常棒（这一方面IOS比android又要好不少）。
如果用translate3d来实现动画，会开启GPU加速，硬件配置差的安卓用起来会耗性能，需慎用（借用1楼评论的）
使用图片时，会发现图片下总是有大概4px的空白，（原因据说图片是inline，触发baseline什么的。。。）常用解决方法有
img{display:block}；

img{vertical-align:top}也可取其他几个值，视情况而定
学会使用display:-webkit-box的布局，能很好地帮我们做到页面自适应，譬如导航栏这些个人觉得特别适合，具体使用方法此处不叙述
使用 a 标签的话，尽量让 a 标签 block ，尽量让用户可点击区域最大化
两个页面使用了transform之后，页面下的z-index有时就会失效，我遇到过，但没去认真探究，只是把z-index提高就好了。
在iOS中，当你点击比如 input 准备输入时，虚拟键盘弹出，整个视窗的高度就会变为减去键盘的高度，加入你在底部有fixed的元素比如btn，这个元素就会跑上来，一般都不会太美观。我是当focus时就把它设为absolute，视情况而定
禁止用户选中文字 -webkit-user-select:none
当你把input设为 width:100%时，有时可能会遇到input的宽度超出了屏幕，这时可对input加一个属性 box-sizing:border-box
关于box-sizing:border-box，此属性是把边框的高宽包含在盒子的高宽中，假如你设置两个元素float且各占50%，又都有border时，用这个属性就可以完美地让它们能显示在同一行
要table的td用col设置了宽度后超出部分隐藏的话给table加属性table-layout:fixed（固定宽度布局）
如果想改变 placeholder 里的样式，需要用css伪类。如 ::-webkit-input-placeholder{color:#ccc}
做一个方向箭头比如 “>” 时，可以用一个正方形的div，设置border:1px 1px 0 0；然后rotate(45deg)
CSS权重：style是1000，id是100，class是10，普通如li、div和伪类是1，通用如*是0；
使用rem时，设某个div比如的height:3rem;line-height:1.5rem;overflow:hidden;时，在某些android手机上可能会出现显示不止两行,第三行会显示点头部。解决：利用js获取文字line-height再去设置div高度

三. JS部分

如果使用jquery绑定touch事件的话，获取touchstart，touchmove的触点坐标用 e.originalEvent.targetTouches[0].pageX，获取touchend则用 e.originalEvent.changedTouches[0].pageX
利用style获取获取transform的rotate值
parseInt(/rotateX$(.*?)$/.exec(getALL.style.webkitTransform)[1])

如果页面一开始没有style值，rotate是写在CSS里的，需要用到getComputedStyle。
有些版本的iphone4中， audio和video默认播放事件不会触发，比如使用window.onload或计时器等都不能触发播放，必须用JS写事件让用户手动点击触发才会开始播放
想要在touchmove:function(e,参数一)加一个参数，结果直接使用e.preventDefault()就会 e 报错，处理方法为

touchmove:function(e,参数一){

　　var e=arguments[0]

e.preventDefault()

}
HTML5的新js API有新的选择器，比如querySelector(“.class #id”)和querySelectorAll(“.class element”)。
点击一个元素时，使用touchstart会立即触发，而使用click则用有大概0.3s的延迟
用e.preventDefault()会阻止的scroll，click等事件

四. 微信部分

1. 2. 判断是否来自微信浏览器
    
    function isFromWeiXin() {
    
        var ua = navigator.userAgent.toLowerCase();
    
        if (ua.match(/MicroMessenger/i) == “micromessenger”) {
    
            return true;
    
        }
    
        return false;
    
    }
  3. 判断手机的类型
    
    var user=””;
    
            if (/android/i.test(navigator.userAgent)){
    
    　　      // android
    
                user=”1″;
    
            }
    
            if (/ipad|iphone|mac/i.test(navigator.userAgent)){
    
                // ios
    
                user=”0″;
    
            }
  4. 微信浏览器里均不能打开下载的链接，需在浏览器打开
  5. 如果在网页里嵌套一个iframe，src为其他的网址等，当在微信浏览器打开时，如果irame里的页面过大，则iframe的src不能加载（具体多大不知道，只是遇到过）
  6. 微信升级到6.0后，在微信网页里需要用到设置分享的标题等，需要用到JSSDK，同时去微信公众平台里绑定里放置网页的域名。
    不过JSSDK也不是所有问题都解决了，在android里点击分享到朋友圈时就触发了分享成功的回调函数，即使取消分享也已经触发了成功的函数（现在不知道是否有修复，如果遇到了这类问题，应该就是这个原因）

2024年 5月
一	二	三	四	五	六	日
« 4月
		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

发表评论 取消回复

发表评论取消回复