一、head部分的meta标签：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="HandheldFriendly" content="true">
<meta name="apple-mobile-web-app-capabale" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-title" content="Terry社区">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telphone=no,email=no">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
二、-webkit-overflow-scrolling: touch; 控制元素在移动设备上是否使用滚动回弹效果.
- auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
- touch: 使用具有回弹效果的滚动,当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文
三、微信上下滚动出现黑的一片：禁止浏览器的默认行为 e.preventDefault
四、postcss-px-to-viewport 或 postcss-px-torem 进行各种屏幕适配
五、横屏显示
js：
const _this = this window.addEventListener( ‘onorientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘, function () { // if (window.orientation === 180 || window.orientation === 0) { // alert(‘竖屏状态！‘) // } if (window.orientation === 90 || window.orientation === -90) { // alert(‘横屏状态！‘) console.log(‘请使用竖屏进行浏览！‘) } }, false )
css: 基于媒体查询标签 监听 orientation：portrait | landscape
@media (min-width: 480px) and (orientation: landscape) { html::before { width: 100%; height: 100%; z-index: 99999; position: fixed; top: 0; left: 0; content: ‘‘; background: #333; } body:before { background-image: url(‘./assets/images/orientation.png‘); background-repeat: no-repeat; background-size: 100% auto; background-position: 50%; content: ‘‘; height: 200px; width: 100px; z-index: 99999; margin: -140px 0 0 -50px; position: absolute; color: #fff; top: 50%; left: 50%; } body:after { content: ‘\4e3a\4e86\66f4\597d\7684\4f53\9a8c\ff0c\8bf7\5c06\624b\673a\7ad6\8fc7\6765‘; position: absolute; top: 50%; text-align: center; height: 30px; left: 0; font-size: 18px; z-index: 99999; width: 100%; color: #fff; margin-top: 35px; } }
六、使用flex布局效果更佳哦！