从0到1,开启vue_mobile---横竖屏需求处理

喜欢vscode的朋友，给大家安利一下，绿色的insiders版本（图标是绿色的， https://code.visualstudio.com/insiders/） 这个版本有一个很好用的功能：可以支持多文件夹，就像sublime，这是vscode基本版没有的

新开vue_mobile是为了把使用过的vue技能整理一下，同时也整理一下之前的知识：

前面写过一篇移动端自适应，大部分的需求是可以满足的 ，但是在横竖屏的处理上在某，一些测试机上（比如vivo1609这个货）不尽人意；root的font-size是通过获取设备的相关计算单位计算出来的，理论上来说使用setTimeout可以消除   横竖屏切换动作无法一开始正确获取计算单位的问题，只要横竖屏获取的计算单位不变，那么横竖屏的样式不会相差很大，需求基本完成，但是vivo1609在横竖屏动作反复操作时获取的计算单位会变，找不到好的处理方法，最后的解决办法是记住第一次的值，参考代码和部分计算单位如下：

( function( doc, win){

//此处是兼容ios的写法

var supportOrientation = ( typeof window. orientation === 'number' &&

typeof window. onorientationchange === 'object'), oFlag = false, ow, lFlag = false, lh;

// oFlag = false,ow,lFlag = false,lh 记住第一次的值就好了 不让fontsize因为计算单位发生变化而改变

var init = function(){

var orientation, docEl = doc. documentElement, dpr= Math. min( win. devicePixelRatio, 3), count = 0;

var updateOrientation = function(){

clientWidth = docEl. clientWidth;

clientHeight = docEl. clientHeight;

if( supportOrientation){

orientation = window. orientation

switch( orientation){

case 90:

case - 90:

orientation = 'landscape'; // 横屏

break;

default:

orientation = 'portrait'; // 竖屏

break;

}

} else{

orientation = ( window. innerWidth > window. innerHeight) ? 'landscape' : 'portrait';

}

docEl. setAttribute( 'class', orientation);

if(! oFlag){

if( clientWidth > clientHeight){

ow= clientHeight

} else {

ow = clientWidth

}

}

if(! lFlag){

if( clientHeight > clientWidth){

lh = clientWidth

lh = clientWidth

} else {

lh = clientHeight

}

}

if( orientation=== 'portrait'){

if ( clientWidth == undefined) return;

if ( clientWidth / dpr > 750) {

clientWidth = 750 * dpr;

}

oFlag = true

docEl. style. fontSize = Math. round( 40 * ( ow / 750)) + 'px';

}

if( orientation=== 'landscape'){

if ( clientHeight === undefined) return;

if ( clientHeight / dpr > 750) {

clientHeight = 750 * dpr;

}

lFlag = true

docEl. style. fontSize = Math. round( 40 * ( lh / 750)) + 'px';

}

};

if( supportOrientation){

window. addEventListener( 'orientationchange', function(){

if( count< 20){

count++;

setTimeout( updateOrientation, 10)

}

}, false);

} else{

//监听resize事件

window. addEventListener( 'resize', function(){

if( count< 20){

count++;

setTimeout( updateOrientation, 10)

}

}, false);

}

updateOrientation();

};

window. addEventListener( 'DOMContentLoaded', init, false);

})( document, window)

相关计算单位（部分）：

网页可见区域宽：document.body.clientWidth 
网页可见区域高：document.body.clientHeight 
网页可见区域宽：document.body.offsetWidth (包括边线的宽) 
网页可见区域高：document.body.offsetHeight (包括边线的宽) 
网页正文全文宽：document.body.scrollWidth 
网页正文全文高：document.body.scrollHeight 
网页被卷去的高：document.body.scrollTop 
网页被卷去的左：document.body.scrollLeft 
网页正文部分上：window.screenTop 
网页正文部分左：window.screenLeft 
屏幕分辨率的高：window.screen.height 
屏幕分辨率的宽：window.screen.width 
屏幕可用工作区高度：window.screen.availHeight 
屏幕可用工作区宽度：window.screen.availWidth

如有错误，请指正，万分感谢

爱生活，爱佳佳