Web前端之家,js判断手机

近期做了写移动端的视觉差动画页面,并且还要求是响应式的,这个对于前端是要求非常高的,但是我们发现在横屏的时候发现体验不是很完美的,然后想了下,必须要提示用户尽量用竖屏来体验,于是就得使用一下方法来处理,分享给大家:

if(window.orientation!=0){
        var obj=document.getElementById(‘orientation’);
        alert(‘横屏内容太少啦,请使用竖屏观看!’);
        obj.style.display=’block’;
}

1、input框在ios上背景颜色在真机上有色差

window.onorientationchange=function(){ var
obj=document.getElementById(‘orientation’); if(window.orientation==0){
obj.style.display=’none’; }else {
alert(‘横屏内容太少啦,请使用竖屏观看!’); obj.style.display=’block’; }
};
做了这样的处理,便于用户调整为竖屏来体验。如果你有什么好的方法,也可以分享出来~

window.onorientationchange=function(){ 
var obj=document.getElementById(‘orientation’);

解决:input[type=button], input[type=submit], input[type=file],
button{

if(window.orientation==0){
                obj.style.display=’none’;
        }else
        {
                alert(‘横屏内容太少啦,请使用竖屏观看!’);
                obj.style.display=’block’;
        }
}; 

cursor:pointer;

-webkit-appearance:none;

}

2、网页在手机上强制横屏:

解决:目前只是在uc与qq-x5内核上解决啦

<meta name=”screen-orientation” content=”portrait”/>//uc

<meta name=”x5-orientation” content=”portrait”/>//qq-x5

3、在ios系统上animation-play-state/* Safari 4.0 – 8.0 */不好使:

解决 使用动画帧的方法来,把他切割成多个动画帧

目前在ios11上不能用

4、移动端在点击事件上的延迟(在iOS上是300ms)onclick事件:

解决方案:

fastclick可以解决在手机上点击事件的300ms延迟

zepto的touch模块,tap事件也是为了解决在click的延迟问题

5、点击元素产生背景或边框怎么去掉

//ios用户点击一个链接,会出现一个半透明灰色遮罩,
如果想要禁用,可设置-webkit-tap-highlight-color的alpha值为0去除灰色半透明遮罩;

//android用户点击一个链接,会出现一个边框或者半透明灰色遮罩,
不同生产商定义出来额效果不一样,可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果;

//winphone系统,点击标签产生的灰色半透明背景,能通过设置去掉;

//特殊说明:有些机型去除不了,如小米2。对于按钮类还有个办法,不使用a或者input标签,直接用div标签

a,button,input,textarea {

-webkit-tap-highlight-color: rgba(0,0,0,0);

-webkit-user-modify:read-write-plaintext-only;
//-webkit-user-modify有个副作用,就是输入法不再能够输入多个字符

}// 也可以* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
winphone<meta name=”msapplication-tap-highlight” content=”no”>

6、美化表单元素

一、使用appearance改变webkit浏览器的默认外观input,select{-webkit-appearance:none;appearance:none;
}

二、winphone下,使用伪元素改变表单元素默认外观

   
 1.禁用select默认箭头,::-ms-expand修改表单控件下拉箭头,设置隐藏并使用背景图片来修饰select::-ms-expand{display:none;
}

   
2.禁用radio和checkbox默认样式,::-ms-check修改表单复选框或单选框默认图标,设置隐藏并使用背景图片来修饰input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display:none;
}

   
3.禁用pc端表单输入框默认清除按钮,::-ms-clear修改清除按钮,设置隐藏并使用背景图片来修饰input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{display:none;
}

7、屏幕旋转的事件和样式

//JS处理

function orientInit(){

var orientChk = document.documentElement.clientWidth >
document.documentElement.clientHeight?’landscape’:’portrait’;

if(orientChk ==’lapdscape’){

//这里是横屏下需要执行的事件

}else{

//这里是竖屏下需要执行的事件

}

}

orientInit();

window.addEventListener(‘onorientationchange’ in
window?’orientationchange’:’resize’, function(){

setTimeout(orientInit, 100);

},false)

//CSS处理

//竖屏时样式

@media all and (orientation:portrait){  }

//横屏时样式

@media all and (orientation:landscape){  }

8、audio元素和video元素在ios和andriod中无法自动播放

//音频,写法一<audio src=”music/bg.mp3″ autoplay loop
controls>你的浏览器还不支持哦</audio>

//音频,写法二<audio controls=”controls”>

优先播放音乐bg.ogg,不支持在播放bg.mp3

优先播放音乐bg.ogg,不支持在播放bg.mp3

//JS绑定自动播放(操作window时,播放音乐)</audio>

$(window).one(‘touchstart’, function(){

music.play();

})

//微信下兼容处理

document.addEventListener(“WeixinJSBridgeReady”, function () {

music.play();

}, false);

//小结

//1.audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常

//2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间

9、JS判断设备

function deviceType(){

var ua = navigator.userAgent;

var agent = [“Android”, “iPhone”, “SymbianOS”, “Windows Phone”, “iPad”,
“iPod”];

for(var i=0; i

if(ua.indexOf(agent[i])>0){

break;

}

}

}

deviceType();

window.addEventListener(‘resize’, function(){

deviceType();

})

10、JS判断微信浏览器

function isWeixin(){

var ua = navigator.userAgent.toLowerCase();

if(ua.match(/MicroMessenger/i)==’micromessenger’){

return true;

}else{

return false;

}

}

11、页面缓存设置

<!–清除缓存–!>

<meta http-equiv=”pragma” content=”no-cache”>

<meta http-equiv=”cache-control” content=”no-cache”>

<meta http-equiv=”expires” content=”0″>

12、弹层后面的内容滚动

deleteSong(key,id,index,e){

letscrollTop_=document.body.scrollTop

document.querySelector(‘body’).style.overflow=’hidden’;

document.querySelector(‘body’).style.overflow=’hidden’;

document.querySelector(‘html’).style.overflow=’hidden’;

document.querySelector(‘html’).style.position=’fixed’;

document.querySelector(‘html’).style.top=-document.body.scrollTop+’px’;

functionforbidScroll(e){

e.preventDefault&&e.preventDefault();

e.returnValue=false;

e.stopPropagation&&e.stopPropagation();

returnfalse;

}

var_this=this;

letaDelete=document.querySelectorAll(‘.delete’);

aDelete[index].style.backgroundImage=`url(${require(“.lete2.png”)})`;

window.addEventListener(‘touchmove’,forbidScroll,false)

confirmAlert({

title:’确定删除歌曲吗?’,// Title dialog

message:”,// Message dialog

confirmLabel:’确认’,// Text button confirm

cancelLabel:’取消’,// Text button cancel

onConfirm:()=>{

document.body.scrollTop=scrollTop_;

document.querySelector(‘body’).style.overflow=’initial’;

document.querySelector(‘html’).style.overflow=’initial’;

document.querySelector(‘html’).style.position=’static’;

window.removeEventListener(‘touchmove’,forbidScroll,false);

aDelete[index].style.backgroundImage=`url(${require(“.lete1.png”)})`;

letsong=_this.state.songlist;

leturl=Config.api.portfolio+’/’+id;

fetch(url,{method:”DELETE”,credentials:’include’}).then((res)=>{

song.splice(index,1);

_this.setState({

songlist:song

})

});

},

onCancel:()=>{

document.body.scrollTop=scrollTop_;

document.querySelector(‘body’).style.overflow=’initial’;

document.querySelector(‘html’).style.overflow=’initial’;

document.querySelector(‘html’).style.position=’static’;

aDelete[index].style.backgroundImage=`url(${require(“.lete1.png”)})`;

window.removeEventListener(‘touchmove’,forbidScroll,false)

},

});

}

13、

发表评论

电子邮件地址不会被公开。 必填项已用*标注