中高级前端必须注意的40条移动端H5坑位指南( 三 ) _H5

.elem {width: 1rem;height: 1rem;background: url("pig.jpg") no-repeat center/100% 100%;}复制代码监听屏幕旋转你还在使用JS判断横屏竖屏调整样式吗？那就真的Out了。
/* 竖屏 */@media all and (orientation: portrait) {/* 自定义样式 */}/* 横屏 */@media all and (orientation: landscape) {/* 自定义样式 */}复制代码支持弹性滚动在苹果系统上非<body>元素的滚动操作可能会存在卡顿，但安卓系统不会出现该情况。通过声明overflow-scrolling:touch调用系统原生滚动事件优化弹性滚动，增加页面滚动的流畅度。
body {-webkit-overflow-scrolling: touch;}.elem {overflow: auto;}复制代码禁止滚动传播与桌面端浏览器不一样，移动端浏览器有一个奇怪行为。当页面包含多个滚动区域时，滚完一个区域后若还存在滚动动量则会将这些剩余动量传播到下一个滚动区域，造成该区域也滚动起来。这种行为称为滚动传播。
若不想产生这种奇怪行为可直接禁止。
.elem {overscroll-behavior: contain;}复制代码禁止屏幕抖动对于一些突然出现滚动条的页面，可能会产生左右抖动的不良影响。在一个滚动容器里，打开弹窗就隐藏滚动条，关闭弹窗就显示滚动条，来回操作会让屏幕抖动起来。提前声明滚动容器的padding-right为滚动条宽度，就能有效消除这个不良影响。
每个移动端浏览器的滚动条宽度都有可能不一致，甚至不一定占位置，通过以下方式能间接计算出滚动条的宽度。100vw为视窗宽度，100%为滚动容器内容宽度，相减就是滚动条宽度，妥妥的动态计算。
body {padding-right: calc(100vw - 100%);}复制代码禁止长按操作有时不想用户长按元素呼出菜单进行点链接、打电话、发邮件、保存图片或扫描二维码等操作，声明touch-callout:none禁止用户长按操作。
有时不想用户复制粘贴盗文案，声明user-select:none禁止用户长按操作和选择复制。
* {/* pointer-events: none; */ /* 微信浏览器还需附加该属性才有效 */user-select: none; /* 禁止长按选择文字 */-webkit-touch-callout: none;}复制代码【中高级前端必须注意的40条移动端H5坑位指南】但声明user-select:none会让<input>和<textarea>无法输入文本，可对其声明user-select:auto排除在外。
input,textarea {user-select: auto;}复制代码禁止字体调整旋转屏幕可能会改变字体大小，声明text-size-adjust:100%让字体大小保持不变。
* {text-size-adjust: 100%;}复制代码禁止高亮显示触摸元素会出现半透明灰色遮罩，不想要！
* {-webkit-tap-highlight-color: transparent;}复制代码禁止动画闪屏在移动设备上添加动画，多数情况会出现闪屏，给动画元素的父元素构造一个3D环境就能让动画稳定运行了。
.elem {perspective: 1000;backface-visibility: hidden;transform-style: preserve-3d;}复制代码美化表单外观表单元素样式太丑希望自定义，appearance:none来帮你。
button,input,select,textarea {appearance: none;/* 自定义样式 */}复制代码美化滚动占位滚动条样式太丑希望自定义，::-webkit-scrollbar-*来帮你。记住以下三个关键词就能随机应变了。

::-webkit-scrollbar：滚动条整体部分
::-webkit-scrollbar-track：滚动条轨道部分
::-webkit-scrollbar-thumb：滚动条滑块部分

::-webkit-scrollbar {width: 6px;height: 6px;background-color: transparent;}::-webkit-scrollbar-track {background-color: transparent;}::-webkit-scrollbar-thumb {border-radius: 3px;background-image: linear-gradient(135deg, #09f, #3c9);}复制代码

美化输入占位输入框占位文本太丑，
::-webkit-input-placeholder来帮你。
input::-webkit-input-placeholder {color: #66f;}复制代码对齐输入占位有强迫症的同学总会觉得输入框文本位置整体偏上，感觉未居中心里就痒痒的。桌面端浏览器里声明line-height等于height就能解决，但移动端浏览器里还是未能解决，需将line-height声明为normal才行。
input {line-height: normal;}复制代码对齐下拉选项下拉框选项默认向左对齐，是时候改改向右对齐了。
select option {direction: rtl;}复制代码修复点击无效在苹果系统上有些情况下非可点击元素监听click事件可能会无效，针对该情况只需对不触发click事件的元素声明cursor:pointer就能解决。
.elem {cursor: pointer;}复制代码识别文本换行多数情况会使用JS换行文本，那就真的Out了。若接口返回字段包含n或<br>，千万别替换掉，可声明white-space:pre-line交由浏览器做断行处理。