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

来源：互联网发布：电信网络机顶盒好用吗编辑：程序博客网时间：2024/06/07 01:54

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

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

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

(function(doc,win){
//此处是兼容ios的写法
var supportOrientation = (typeofwindow.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

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

爱生活，爱佳佳

阅读全文

0 0