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键盘首字母自动大写
2、禁止文本缩放
{ -webkit-text-size-adjust: 100%}
3、移动端如何清除输入框内阴影
在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：
input,
textarea {
border: 0;
-webkit-appearance: none;
}
4、忽略页面的数字为电话，忽略email识别
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.手机拍照和上传图片
的accept 属性
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不显示问题 写成下面这样就好了
25、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉
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的作尺寸单位的元素都会随着页面变化而等比例缩放了！
补充移动端之调试工具
1. vConsole
第一种用法：引入js文件
资源链接
第二种用法：npm命令
先执行命令 npm i vconsole
然后在文件中加入代码，就可以打印日志了
import VConsole from 'vconsole';
let vConsole = new VConsole();
console.log("test");
是不是很方便！
同类产品 eruda
2. Charles
Charles 是一款强大的抓包工具，可以截取包括 https 在内的各种网络请求并方便的查看具体信息。有 Mac、Windows 和 Linux多版本，通过配置 WIFI 代理，也可以拦截手机发出的请求。毕竟前端相当一部分报错是网络错误或数据不符合预期导致的（甩锅后端）。所以通过拦截 http 请求,查看具体的请求信息和数据，能获取很多有用的信息，可以在一定程度上帮助 debug。但是该软件是付费的（希望大家支持正版，要记住你也是一位开发），而且它定位不了 js 的报错，所以只能作为一个辅助工具。至于使用方法，网上很多介绍—— 此处一枚。