快捷搜索:

金沙第一娱乐娱城官网

当前位置:金沙第一娱乐娱城官网 > 金沙第一娱乐娱城官网 > 目前在ios11上不能用,必须要提示用户尽量用竖屏

目前在ios11上不能用,必须要提示用户尽量用竖屏

来源:http://www.dlksamusic.com 作者:金沙第一娱乐娱城官网 时间:2020-05-07 08:12

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

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){  }

本文由金沙第一娱乐娱城官网发布于金沙第一娱乐娱城官网,转载请注明出处:目前在ios11上不能用,必须要提示用户尽量用竖屏

关键词: