通用
(移动端)300ms点击延迟的问题
- 安装fastclick库:
npm install fastclick --save
- 在main.Js中写入：
import fastClick from 'fastclick'
fastClick.attach(document.body)
(移动端)禁用放大缩小
-
修改viewport
-
在 iOS 10之前，iOS 和 Android 都可以通过一行 meta 标签来禁止页面缩放：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
- iOS 10开始，meta 设置在 Safari 内无效
iOS 有一组双指手势操作的事件：gesturestart、gesturechange、gestureend
- 完整禁止缩放代码
window.onload = function() {
// 阻止双击放大
var lastTouchEnd = 0;
document.addEventListener('touchstart', function(event) {
if (event.touches.length > 1) {
event.preventDefault();
}
});
document.addEventListener('touchend', function(event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
// 阻止双指放大
document.addEventListener('gesturestart', function(event) {
event.preventDefault();
});
}
引用iconfont的图标
- 首先在iconfont的官网创建一个项目，然后选择图标添加到项目中，然后使用Unicode下载,将解压出来的文件放入项目，需要的文件有：
iconfont.eot,iconfont.svg,iconfont.ttf,iconfont.woff以及iconfont.css文件 - 在
iconfont.css文件中修改以上四个文件的路径 - 在
main.js中导入iconfont.css文件 - 在html中使用例子：
<span class="iconfont ">对应图标的unitcode编码</span>
input默认调用九宫格数字键盘
<input type="number" pattern="\d*">
安卓默认可以调出九宫格, 但ios需要加上pattern="\d*"
iOS
iOS H5交互
/**
* 与 ios native 交互
* payClick 定义的抛出给iOS交互的方法
*/
try {
window.webkit.messageHandlers.payClick.postMessage({
money: this.money
});
return;
} catch (error) {
console.log(error);
}
iOS H5页面 上下滑动卡顿
/* ios端微信h5页面上下滑动时卡顿 */
* {
-webkit-overflow-scrolling: touch;
}
iOS input存在重影边框问题
input {
outline: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
iOS input光标过长
不要给input加高度，加padding撑开就行了
Android
安卓1px边框丢失
:before:after和transform
/* 一定要在改元素上设置position:relative,before内设置position: absolute */
.person-infos{
position: relative;
&::before{
content: "";
pointer-events: none; /* 防止点击触发 */
box-sizing: border-box;
position: absolute;
width: 200%;
height: 200%;
left: 0;
top: 0;
border-top:1px solid #fff;
transform:scale(0.5);
transform-origin: 0 0;
}
}
- 给不兼容的加样式 如：
border-bottom: 1Px solid #ddd;也可以完美的规避px2rem 的px向rem 的转化
样式
placeholder属性设置字体颜色
- 兼容写法
/* input */
input::placeholder {
color: #666;
}
input::-webkit-input-placeholder {
/* WebKit browsers */
color: #666;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #666;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #666;
}
input:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #666;
}
/* textarea */
textarea::placeholder {
color: #666;
font-size: 32px;
}
textarea::-webkit-input-placeholder {
/* WebKit browsers */
color: #9c9c9c;
}
textarea:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #666;
font-size: 32px;
}
textarea::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #666;
font-size: 32px;
}
textarea::-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #666;
font-size: 32px;
}
