menu linbiwei
account_circle

正在努力加载中QAQ

移动端css竖屏兼容写法和横屏处理方式
date_range 2019-07-17 13:48
apps html,css
local_offer 查看标签
comment 1 条评论
浏览:128

竖屏兼容写法

第一次写移动端布局不太熟,所以用了此笨办法~

写在head标签里面
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">
给定一个最大的宽度
@media (max-width:960px){样式}
/* 兼容iphone4/4s */
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){样式}
/* 兼容iphone5/SE */
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){样式}
/* 兼容iphone6/7/8 Plus */
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:3){样式}
/*兼容iphone x*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){样式}
/*兼容Galaxy s5*/
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3){样式}
/*兼容Pixel2/2XL*/
@media only screen  and (device-width : 411px){样式}
/*兼容Nokia N9*/
@media only screen  and (device-width : 480px){样式}
/*兼容iPad*/
@media only screen  and (device-width : 768px){样式}
/*兼容w320*h640手机*/
@media only screen  and (device-width: 320px){样式}

横屏处理

利用js监听手机旋转的角度切换竖屏和横屏css文件
   默认加载竖屏样式
   <link rel="stylesheet" id="css"  href="竖屏样式">
    <script>
        window.addEventListener('orientationchange', function(event){
            if (window.orientation == 180 || window.orientation==0) {
                $("#css").attr("href", "竖屏样式");
            }
            if (window.orientation == 90 || window.orientation == -90) {
                $("#css").attr("href", "横屏样式");
            }
        });
    </script>

user-scalable=no在ios10失效处理

window.onload=function () {  
        document.addEventListener('touchstart',function (event) {  
            if (event.touches.length > 1) {  
                event.preventDefault();  
            }  
        })  
        var lastTouchEnd=0;  
        document.addEventListener('touchend',function (event) {  
            var now=(new Date()).getTime();  
            if (now-lastTouchEnd <= 300) {  
                event.preventDefault();  
            }  
            lastTouchEnd=now;  
        },false)  
    } 

iphone x css的js兼容写法

if ($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3) {
    xxx
}
版权声明:本站文章采用知识共享署名4.0 国际许可协议进行许可,请在转载时注明出处及本声明!
名称不能为空
email
邮箱不能为空,请填写正确格式
link
网址请用http://或https://开头
message
评论不能为空
支持Markdown和LaTex数学公式
sentiment_very_satisfied

captcha
请输入验证码

    July 18th, 2019 at 02:42 pmlinbiwei
    keyboard_arrow_down
    July 18th, 2019 at 02:42 pm

    测试$$ x^2, x_1^2, x^{(n)}_{22}, ^{16}O^{2-}_{32}, x^{y^{z^a}}, x^{y_z} $$

    account_circle
    博主
keyboard_arrow_up