1、H5页面在IOS后退不刷新
该现象与往返缓存(bfcache)有关系
//ios端浏览器回退功能不刷新页面，android端不存在
方法一：
let isIos = /^.*((iPhone)|(iPad)|(Safari))+.*$/;
if (isIos.test(navigator.userAgent)) {
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload()
}
};
}
或者
window.onunload = function () {};
// event.persisted为true，表示从缓存读取，false表示从服务器返回。
`在iOS中，event.persisted值会正常更新，但是在安卓中，persisted一直为false，所以此方法不能完全解决问题`
// 在pageshow事件基础上再添加performance.navigation.type加判断（此判断方法为最优），可以查询到页面加载的多种情况
方法二：
window.addEventListener('pageshow', () => {
if ( event.persisted || ( window.performance && window.performance.navigation.type == 2 ) ) {
location.reload()
}
}, false)
window.performance.navigation.type的值:
0： 当前页面是通过点击链接，书签和表单提交，或者脚本操作，或者在url中直接输入地址，type值为0
1： 点击刷新页面按钮或者通过Location.reload()方法显示的页面，type值为1
2： 页面通过历史记录和前进后退访问时。type值为2
255：任何其他方式，type值为255
2、ios对fixed的属性兼容性
iOS4下不支持position:fixed，可以用absolute替代
fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
3、Input框的兼容性
3.1、input 的 placeholder会出现文本位置偏上
设置line-height：normal
3.2、ios端 input框内容显示不全
input 设置 line-height 撑开
3.3、ios中 input框失去光标，底部顶起问题
设置失去焦点事件 window.scroll( 0 , 0 )，失去焦点时重新设置高度
3.4、iOS下取消input在输入的时候英文首字母的默认大写
<input type="text" autocapitalize="none">
3.5、iOS端点击input输入框键盘抬起不灵敏
现象：项目中input触发焦点后，键盘抬起缓慢/input获取焦点不正常
原因：由于vue项目中引入fastclick插件引起的，使用fastclick 导致的iOS 机型点击输入框不能聚焦，或者点击多次才能聚焦的问题
解决：
`方法一：`
需要修改fastclick源代码，在`FastClick.prototype.focus`方法中加入 `targetElement.focus(); ` 就可以了
FastClick.prototype.focus = function(targetElement) {
var length;
// Issue #160: on iOS 7, some input elements (e.g. date datetime month) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724.
if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {
length = targetElement.value.length;
` targetElement.focus(); //加入这一句话就OK了 `
targetElement.setSelectionRange(length, length);
} else {
targetElement.focus();
}
};
`方法二：`
import FastClick from 'fastclick'
// 修复点击300ms延迟
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', () => {
FastClick.attach(document.body)
}, false)
}
FastClick.prototype.focus = function(targetElement) {
targetElement.focus();
};
3.6、设置 input 和 textarea 的 placeholder 属性样式
placeholder 属性是 css3 中新增加的属性，IE9和Opera12以下版本的CSS选择器均不支持占位文本；
只需在冒号前面添加 input 和 textarea （ 手机端只使用 webkit 形式即可 ）
::-webkit-input-placeholder { /* WebKit browsers */
color:#999;font-size:16px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:#999;font-size:16px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:#999;font-size:16px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color:#999;font-size:16px;
}
4、禁止复制、选中文本
div {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
5、设置缓存
手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache
<meta http-equiv="Cache-Control" content="no-cache" />
6、长时间按住页面出现闪退
div {
-webkit-touch-callout: none;
}
7、移动端禁止图片长按和点击img标签放大图片
img{
pointer-events: none;
}
8、阻止旋转屏幕时自动调整字体大
移动端开发存在横屏竖屏，所以会存在字体大小发生改变，导致页面布局发生改变
* {
-webkit-text-size-adjust: none;
}
9、iOS和安卓下存在难看的点击的高亮效果
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
10、禁止 iOS 识别长串数字为电话
<meta name="format-detection" content="telephone=no" />
11、禁止 iOS 弹出各种操作窗口
*{
-webkit-touch-callout: none;
}
12、calc的兼容处理
CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。 Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸
div {
width: 95%;
width: -webkit-calc(100% - 50px);
width: calc(100% - 50px);
}
13、消除transition闪屏问题
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-transform-style: preserve-3d;
/*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/
-webkit-backface-visibility: hidden;
14、CSS动画页面闪白,动画卡顿
1、尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
2、开启硬件加速
div{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
15、iOS系统中文输入法输入英文时，字母之间可能会出现一个六分之一的空格
value = value.replace(/\u2006/g, '');
16、浮动子元素撑开父元素盒子高度
1、父元素设置为 overflow: hidden;
2、父元素设置为 display: inline-block;
17、Video的兼容性问题
17.1、Video的 x5同层播放器
X5是腾讯基于Webkit开发的渲染引擎，它提供了一种名叫「同层播放器」的特殊video元素以解决遮盖问题
<video id="video" class="video" controls="controls" playsinline x5-video-player-type="h5">
<source src="./video.mp4" />
</video>
17.2、video视频行内播放
默认情况下，点击video播放会全屏播放，如果想要视频在局部内可以播放的话，可以设置：x5-playsinline
17.3、video获取视频的第一帧作为背景图；
window.onload = function(){
var video = document.getElementById('video');
//第一帧图片与原视频的比例
var scal = 0.8;
//监听页面加载事件
video.addEventListener('dataLoad',function(){
//创建一个画布
var canvas = document.createElement('canvas');
canvas.width = video.style.width*scal;
canvas.height = video.style.height*scal;
//绘制图片
canvas.getContentext('2d').drawImage(video,0,0,canvas.width,canvas.height);
//设置标签的poster属性
viseo.setAttribute("poster",canvas.toDataURL("image/png"));
});
}
17.4、Video禁止安卓手机自动全屏
video标签在安卓系统下，默认全屏，通过添加属性可以禁止全屏，
x5-playsinline="true"，切记添加该属性后不能再有x5-video-player-type='h5' x5-video-player-fullscreen='true'，否则还会默认全屏
17.5、video播放视频时，不能完全覆盖的问题
给video标签添加style样式: width:100%;height:100%;object-fit:fill;
video标签的父元素应该设置宽高：width:100%;height:100%
17.6、video的poster属性在很多手机浏览器不生效
通常把video隐藏，用一张图片作为封面。最好不要用{ display: none }或者{ width:0;height:0; }隐藏video，视频元素会处于未激活的状态，给后续的处理带来麻烦。可以将视频设置成1×1像素大小
<video width="1" height="1" controls loop="loop" src=""></video>
17.7、video播放时自动全屏
iPhone、x5内核可以增加playsinline属性，让video内联播放，Android不可以，且不同浏览器的表现不同
<video class="video-source"
width="100%"
height="240px"
controls /*规定浏览器为该视频提供播放控件*/
style="object-fit:fill" /* style会让 Android / web 的视频在微信里的视频全屏，如果是在手机上预览，会让视频的封面同视频一样大小*/
webkit-playsinline="true" /*ios 10中设置可以让视频在小窗内播放*/
x-webkit-airplay="true" /*支持Airplay的设备（如：音箱、Apple TV)播放*/
playsinline="true" /*IOS微信浏览器支持小窗内播放*/
x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/
x5-video-orientation="h5" /*播放器方向，landscape横屏，portraint竖屏，默认值为竖屏默认值portraint。无论是直播还是全屏H5一般都是竖屏播放，但是这个属性需要x5-video-player-type开启H5模式*/
x5-video-player-fullscreen="true" /*全屏设置，设置为 true 是防止横屏*/
x5-playsinline
preload="auto"
</video>
18、设置了cursor: not-allowed;鼠标禁用样式，鼠标还是箭头？
设置了 pointer-events:none; 所致。只需设置 pointer-events: auto;
19、设置滚动条的样式
div{
border-left:1px solid #eee;
height:100%;
overflow-x: hidden;
overflow-y: scroll;
}
div::-webkit-scrollbar {
width: 3px;
// height: 4px;
// background: red;
border-radius: 2px;
}
div::-webkit-scrollbar-track {
// -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 2px;
background: #fff;
}
div::-webkit-scrollbar-thumb {
border-radius: 2px;
// box-shadow: inset 0 0 5px #ddd;
background: #ddd;
}
//======================滚动条样式==========================
/* Let's get this party started */
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
20、overflow: auto在iOS有兼容问题，卡顿滑不动
-webkit-overflow-scrolling: touch;
21、IphoneX的顶部通栏(44px)和底部操作栏(34px)兼容问题
viewport可以设置的选项就是
viewport-fit ,它有三个可选值：
contain: 可视窗口完全包含网页内容
cover: 网页内容完全覆盖可视窗口
auto: 默认值， 同contain的作用
通过给页面设置viewport-fit=cover，可以将页面的布局区域延伸到页面顶部和底部
// 设置mate标签的viewport-fit属性为cover
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
方法一：
// 针对iphoneX的样式设置
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
/*增加头部适配层*/
.has-topbar {
height: 100%;
box-sizing: border-box;
padding-top: 44px;
&:before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 44px;
background-color: #000000;
z-index: 9998;
}
}
/*增加底部适配层*/
.has-bottombar {
height: 100%;
box-sizing: border-box;
padding-bottom: 34px;
&:after {
content: '';
z-index: 9998;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 34px;
background: #f7f7f8;
}
}
/*导航操作栏上移*/
.bottom-menu-fixed {
bottom: 34px;
}
}
// html中针对根html设置样式 has-topbar has-bottombar
<html class="has-topbar has-bottombar">
方法二：
body {
padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px
padding-left: constant(safe-area-inset-left); //如果未竖屏时为0
padding-right: constant(safe-area-inset-right); //如果未竖屏时为0
padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px
}
注意: iphoneX的适配---媒体查询
@media only screen and (width: 375px) and (height: 690px){
body {
background: blue;
}
}
// 或者
@media only screen and (device-width: 375px) and (device-height: 812px) and(-webkit-device-pixel-ratio: 3) {
body {
background: blue;
}
}
22、图片在h5中显示正常，嵌套在app内加载不出来（仅在 Android 5.0 以上有问题）
Webview在安卓5.0之前默认允许其加载混合网络协议内容 ，但在安卓5.0之后，WebView默认不允许加载http与https混合内容
原因：网页地址是https地址，图片地址是http地址，WebView默认不允许加载http与https混合内容
解决：(1)、 需要设置webview允许其加载混合网络协议内容
(2) 、或者把图片改变成https协议
网友评论