原本在PC端自适应打开的系统,需要支持在移动端打开,功能能正常完整使用。
需留意以下几个地方的设置
1、meta标签
<!-- pc端在手机端等比例缩放 -->
<meta name="viewport" content="width=device-width,intial-scale=1,maximum-scale=0,user-scalable=yes,shrink-to-fit=no">
2、css配置,检查系统是否禁止了手势操作
/**
touch-action 样式
auto:默认值。浏览器允许一些手势(touch)操作在设置了此属性的元素上,例如:对视口(viewport)平移、缩放等操作。
none:禁止触发默认的手势操作。
pan-x:可以在父级元素(the nearest ancestor)内进行水平移动的手势操作。
pan-y:可以在父级元素内进行垂直移动的手势操作。
manipulation:允许手势水平/垂直平移或持续的缩放。任何auto属性支持的额外操作都不支持
*/
* { touch-action: auto; }
3、屏幕尺寸发生变化时,可响应
window.onresize = function () {
var winW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (window.screen.width < 1366) { //小于1366屏幕时做屏幕缩放为768
$('head').remove('[name="viewport"]')
$('head').append('<meta name="viewport" content="width=768">')
} else {
$('head').remove('[name="viewport"]')
}
}