web&移动端-兼容-测试-调试_持续更新

0、ios 等移动端input点击获取不到焦点的问题

input{
      -webkit-user-select: auto!important;
      -khtml-user-select: auto!important;
      -moz-user-select: auto!important;
      -ms-user-select: auto!important;
      -o-user-select: auto!important;
      user-select: auto!important;
    }

1、关闭iOS键盘首字母自动大写

<input type="text" autocapitalize="off" />

2、禁止文本缩放

{ -webkit-text-size-adjust: 100%}

3、移动端如何清除输入框内阴影
在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：

input,
textarea {
    border: 0; 
    -webkit-appearance: none; 
}

4、忽略页面的数字为电话，忽略email识别

<meta name="format-detection" content="telephone=no, email=no"/>

5、快速回弹滚动

.xxx {
    overflow: auto; 
    -webkit-overflow-scrolling: touch;
}
/*PS：iScroll用过之后感觉不是很好，有一些诡异的bug，这里推荐另外一个 iDangero Swiper，这个X件集成了滑屏滚动的强大功能（支持3D），而且还有回弹滚动的内置滚动条，官方地址：
http://www.idangero.us/sliders/swiper/index.php*/

6、移动端禁止选中内容

div {
    -webkit-user-select: none;
}

7、移动端取消touch高亮效果
在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来禁止：

.xxx {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

8、如何禁止保存或拷贝图像
通常当你在手机或者pad上长按图像 img ，会弹出选项存储图像或者拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：PS：需要注意的是，该方法只在 iOS 上有效。

img {
    -webkit-touch-callout: none;
}

9、解决字体在移动端比例缩小后出现锯齿的问题：

-webkit-font-smoothing: antialiased;

10、栅格布局：可以改变盒子模型的计算方式方便你设置宽进行自适应流式布局

box-sizing:border-box;

11、移除ios的input的样式

input[type=input]{-webkit-appearance:none;}
/*移除ios的样式，但这个属性存在bug，会导致iso无法获取checkbox值，
给这个元素重新赋上
input[type=checkbox]{-webkit-appearance:checkbox;}
就不会报错了。*/

12、按钮被按下效果的实现需要给a标签加a:active属性和添加一段空函数

document.body.addEventListener('touchend', function () { });

13、解决去掉下边框。

-webkit-border-bottom:none;

14、英文文本换行(不拆分单词)

word-wrap:break-word;

15、字体大小尽量使用pt或者em，rem，代替px。

16、设置input里面placeholder字体的大小

::-webkit-input-placeholder{ font-size:10pt;}

17、wap页面有img标签，记得加上display：block；属性来解决img的边缘空白间隙的1px像素。如果图片要适应不同的手机要设置width:100%;而且不能添加高度。

=======================================================

移动端如何清除输入框内阴影
在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：

input,
textarea {
　　border: 0; 
　　-webkit-appearance: none; 
}

移动端禁止选中内容
如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：

.user-select-none {
  -webkit-user-select: none;  
  -moz-user-select: none;     
  -ms-user-select: none;            
}
兼容IE6-9的写法：
/*onselectstart="return false;" unselectable="on"*/

20.audio元素和video元素在ios和andriod中无法自动播放
应对方案：触屏即播

$('html').one('touchstart',function(){
    audio.play()
})

21.手机拍照和上传图片

<input type="file">的accept 属性
<!-- 选择照片 -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">

ios 有拍照、录像、选取本地图片功能
部分android只有选取本地图片功能
winphone不支持
input控件默认外观丑陋

消除transition闪屏

.css{
    
    -webkit-transform-style: preserve-3d;
    
    -webkit-backface-visibility: hidden;
}

23.开启硬件加速解决页面闪白保证动画流畅

 .css {
     -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
  }

设计高性能CSS3动画的几个要素
尽可能地使用合成属性transform和opacity来设计CSS3动画，
不使用position的left和top来定位
利用translate3D开启GPU加速

24.video iOS不显示问题写成下面这样就好了

<video controls="controls" autoplay="autoplay">
      <source src="xxxx.mp4" type="video/mp4" />
</video>

25、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉

<meta name="msapplication-tap-highlight" content="no">

26、ios input框加了disabled的属性样式的设置不上的兼容性问题

input[disabled],input:disabled,input.disabled{
color: #999;
-webkit-text-fill-color:#999;
-webkit-opacity:1;
opacity: 1;
}

css去除移动端的滚动条

  ::-webkit-scrollbar {
    width: 0px;
    }
    
    ::-webkit-scrollbar-track {
    background-color: none;
    }
    
    ::-webkit-scrollbar-thumb {
    background-color: none;
    }
    
    ::-webkit-scrollbar-thumb:hover {
    background-color: none;
    }
    
    ::-webkit-scrollbar-thumb:active {
    background-color: none;
    }




/*修改滚动条样式*/
div::-webkit-scrollbar{
  width:10px;
  height:10px;
  /**/
}
div::-webkit-scrollbar-track{
  background: rgb(239, 239, 239);
  border-radius:2px;
}
div::-webkit-scrollbar-thumb{
  background: #bfbfbf;
  border-radius:10px;
}
div::-webkit-scrollbar-thumb:hover{
  background: #333;
}
div::-webkit-scrollbar-corner{
  background: #179a16;
}

28.解决ios复制内容的兼容问题

let oInput = document.createElement("input"); 
oInput.value = "recheyouping"; 
oInput.readOnly="readOnly"; 
document.body.appendChild(oInput); oInput.select(); // 选择对象 
oInput.setSelectionRange(0, 20); //兼容ios-safari核心代码 
document.execCommand("Copy"); // 执行浏览器复制命令 
oInput.className = "oInput"; 
oInput.style.display = "none"; this.$message.show({ msg: "复制成功！" });

29.计算精度缺失0.1+0.3！==0.4的问题
1.将数字转成整数
这是最容易想到的方法，也相对简单

function add(num1, num2) {
 const num1Digits = (num1.toString().split('.')[1] || '').length;
 const num2Digits = (num2.toString().split('.')[1] || '').length;
 const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
 return (num1 * baseNum + num2 * baseNum) / baseNum;
}

但是这种方法对大数支持的依然不好

30.获取当月的天数

var day = new Date(2018,10,0);   //最后一个参数为0,意为获取2018年10月一共多少天
console.log(day.getDate());  //31

31.检测黑暗模式
随着黑暗模式的普及，ios设备中启用了黑暗模式，那么将你的应用程序切换到黑暗模式，可以利用媒体查询来使这项任务变得简单。

const isDarkMode = () =>
  window.matchMedia &&
  window.matchMedia("(prefers-color-scheme: dark)").matches。
// 测试
console.log(isDarkMode())。

32.滚动到顶部
简单的滚动元素的方法是使用scrollIntoView方法。添加行为。"smooth "来实现平滑的滚动动画。

const scrollToTop = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "start" })。

33.滚动到底部
就像scrollToTop方法一样，scrollToBottom方法也可以用scrollIntoView方法轻松实现，只需将块值切换为结束即可

const scrollToBottom = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "end" })。

2.三方库

这个是比较全面的做法，推荐2个我平时接触到的库

1).Math.js

专门为 JavaScript 和 Node.js 提供的一个广泛的数学库。支持数字，大数字(超出安全数的数字)，复数，分数，单位和矩阵。功能强大，易于使用。

官网：mathjs.org/

GitHub：github.com/josdejong/m…

2).big.js

官网：mikemcl.github.io/big.js

GitHub：github.com/MikeMcl/big…

3）若干，不一一列举了

这几个类库都很牛逼，可以应对各种各样的需求，不过很多时候，一个函数能解决的问题不需要引用一个类库来解决。

框架

移动端基础框架
zepto.js 语法与jquery几乎一样，会jquery基本会zepto~
iscroll.js 解决页面不支持弹性滚动，不支持fixed引起的问题~ 实现下拉刷新，滑屏，缩放等功能~
underscore.js 该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。
fastclick 加快移动端点击响应时间
animate.css CSS3动画效果库
Normalize.css Normalize.css是一种现代的、CSS reset为HTML5准备的优质替代方案

滑屏框架
适合上下滑屏、左右滑屏等滑屏切换页面的效果
slip.js
iSlider.js

fullpage.js
swiper
3.瀑布流框架
masonry
工具推荐
caniuse 各浏览器支持html5属性查询
paletton 调色搭配

=========================================================================

对于网站字体设置
移动端项目：

font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;
###移动和pc端项目：
font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,”Hiragino Sans GB”,Simsun,sans-self;

===========================================================================================

有关Flexbox弹性盒子布局一些属性
不定宽高的水平垂直居中

.xxx{
        position:absolute;
        top:50%;
        left:50%;
        z-index:3;
        -webkit-transform:translate(-50%，-50%)；
        border-radius:6px;
        background:#fff;
}
    /*[flexbox版]不定宽高的水平垂直居中*/
.xx{
        justify-content:center;/*子元素水平居中，*/
        align-items:center;/*子元素垂直居中;*/
        display:-webkit-flex;
}
    /*单行文本溢出*/
.xx{
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
}
      /*多行文本溢出*/
.xx{
        display:-webkit-box !importmort;
        overflow:hidden;
        text-overflow:ellipsis;
        word-break:break-all;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;/*(数字2表示隐藏两行)*/
}
    /*使用流体图片*/
img{
        width:100%;
        height:auto;
        width:auto\9;
}
    /*一像素边框（例子:移动端列表的下边框）*/
    .list-iteam:after{
            position: absolute;
            left: 0px;
            right: 0px;
            content: '';
            height: 1px;
            transform: scaleY(0.5);
            -moz-transform: scaleY(0.5);
            -webkit-transform:scaleY(0.5);
            background-color: #e3e3e3;
        }

针对适配等比缩放的方法:

@media only screen and (min-width: 1024px){
        body{zoom:3.2;} 
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
        body{zoom:2.4;}
}
@media only screen and (min-width: 640px) and (max-width: 767px) {
        body{zoom:2;}
}
@media only screen and (min-width: 540px) and (max-width: 639px) {
        body{zoom:1.68;}
}
@media only screen and (min-width: 480px) and (max-width: 539px) {
        body{zoom:1.5;}
}
@media only screen and (min-width: 414px) and (max-width: 479px) {
        body{zoom:1.29;}
}
@media only screen and (min-width: 400px) and (max-width: 413px) {
    body{zoom:1.25;}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
        body{zoom:1.17;}
}
@media only screen and (min-width: 360px) and (max-width:374px) {
        body{zoom:1.125;}
}

less屏幕适配

//适配屏幕
//1rem=50px
.adopter(@width: 320px) {
    @media screen and(min-width: @width) {
        html {
            font-size: round(@width/15, 2);
        }
    }
}

.adopter(320px);
.adopter(360px);
.adopter(375px);
.adopter(384px);
.adopter(400px);
.adopter(414px);
.adopter(424px);
.adopter(460px);
.adopter(480px);
.adopter(540px);
.adopter(720px);
.adopter(750px);
.adopter(830px);
.adopter(960px);

/* 屏幕的适配 这里是less生成的css 把每个屏幕的宽度分成了15分 如果你现在没有合适转换的less 或者sass的X件用这个  搭配vscode cssrem也是很好用的*/
@media (min-width: 320px) {
  html {
    font-size: 21.33px;
  }
}
@media (min-width: 360px) {
  html {
    font-size: 24px;
  }
}
@media (min-width: 375px) {
  html{
    font-size: 25px;
  }
}
@media (min-width: 384px) {
  html {
    font-size: 25.6px;
  }
}
@media (min-width: 400px) {
  html {
    font-size: 26.67px;
  }
}
@media (min-width: 414px) {
  html {
    font-size: 27.6px;
  }
}
@media (min-width: 424px) {
  html {
    font-size: 28.27px;
  }
}
@media (min-width: 460px) {
  html {
    font-size: 30.67px;
  }
}
@media (min-width: 480px) {
  html {
    font-size: 32px;
  }
}
@media (min-width: 540px) {
  html {
    font-size: 36px;
  }
}
@media (min-width: 720px) {
  html {
    font-size: 48px;
  }
}
@media (min-width: 750px) {
  html {
    font-size: 50px;
  }
}

js的rem布局的版本

   (function (doc, win) {
          var docEl = doc.documentElement,
              resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
             recalc = function () {
                 var clientWidth = docEl.clientWidth;
                 if (!clientWidth) return;
                  if(clientWidth>=640){
                     docEl.style.fontSize = '100px';
                 }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                 }
             };
 
         if (!doc.addEventListener) return;
         win.addEventListener(resizeEvt, recalc, false);
         doc.addEventListener('DOMContentLoaded', recalc, false);
     })(document, window);
//如果我们一开始把html的font-size设为100px呢？此时1rem = 100px，那么上面的宽55px，高37px的元素样式就可以这么设置 ↓
//width: 0.55rem;
//height: 0.37rem;
//是不是换算起来简单多了？！
//（当然可能有同学问，为什么不一开始把html的font-size设为1px呢，这样换算起来也简单，答：浏览器一般都有最小字体限制，比如谷歌浏览器，最小中文字体就是12px，所以实际上没有办法让1rem=1px。）
//根据上面的js代码，如果页面宽度低于640px,那么页面中html的font-size也会按照（当前页面宽度/640）的比例变化。这样，页面中凡是应用了rem的作尺寸单位的元素都会随着页面变化而等比例缩放了！

补充移动端之调试工具

Charles 是一款强大的抓包工具，可以截取包括 https 在内的各种网络请求并方便的查看具体信息。有 Mac、Windows 和 Linux多版本，通过配置 WIFI 代理，也可以拦截手机发出的请求。毕竟前端相当一部分报错是网络错误或数据不符合预期导致的（甩锅后端😄）。所以通过拦截 http 请求,查看具体的请求信息和数据，能获取很多有用的信息，可以在一定程度上帮助 debug。但是该软件是付费的（希望大家支持正版，要记住你也是一位开发），而且它定位不了 js 的报错，所以只能作为一个辅助工具。

最后编辑于：2024.01.26 17:14:22

禁止转载，如需转载请通过简信或评论联系作者。

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 201,468评论 5赞 473
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 84,620评论 2赞 377
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 148,427评论 0赞 334
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,160评论 1赞 272
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,197评论 5赞 363
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,334评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,775评论 3赞 393
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,444评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,628评论 1赞 295
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,459评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,508评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,210评论 3赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,767评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,850评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,076评论 1赞 258
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,627评论 2赞 348
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,196评论 2赞 341

web&移动端-兼容-测试-调试_持续更新

web&移动端-兼容-测试-调试_持续更新

2.三方库

框架

less屏幕适配

js的rem布局的版本

补充移动端之调试工具

1. vConsole

2. Charles

推荐阅读更多精彩内容