首页 > 为什么我的页面的iphone上样式完好,放在其他手机就挂了

为什么我的页面的iphone上样式完好,放在其他手机就挂了

我要做一个横竖两个版本的页面,横竖版页面的内容是一样的,但样式不一样,竖版是一个正常的列表页面,横版的列表可以左右滑动,通过css的media做了横竖版适配,然后通过js判断如果是横屏的时候走横屏的css,如果是竖屏的时候走竖屏的css,在chrome模拟器上测了各种型号的手机都没问题,然后放到真机上看,iphone上横竖效果都很好,放到三星note2默认的浏览器上样式就乱了,但是三星S4默认的浏览器上样式好着,在QQ浏览器上样式也乱着,还有就是我在页头已经加了
meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no"这句话,在note2默认浏览器和S4QQ浏览器上会自动将我的页面放大,目前只在这几款手机上试,很郁闷。。。。。。

css:

@media screen and (orientation:portrait) {
...
}

@media screen and (orientation:landscape) {
...
}

js:

var swiper = null;
function showSwiper() {
    var winw = $(window).width();
    if (winw > 720) {
        swiper = new Swiper('.swiper-container', {
            pagination: false,
            slidesPerView: 3,
            slidesPerColumn: 2,
            paginationClickable: true,
            spaceBetween: 20
        });
    } else if (winw > 454 && winw < 720) {
        swiper = new Swiper('.swiper-container', {
            pagination: false,
            slidesPerView: 2,
            slidesPerColumn: 2,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            paginationClickable: true,
            spaceBetween: 15
        });
    } else {
        swiper = new Swiper('.swiper-container', {
            pagination: false,
            slidesPerView: 1,
            slidesPerColumn: 2,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            paginationClickable: true,
            spaceBetween: 10
        });
    }
}


$(window).on("orientationchange", function (event) {
    if (event.orientation == "portrait") {
        if (swiper != null) {
            swiper.destroy(true, true);
            swiper = null;
        }
        return false;
    } else if (event.orientation == "landscape") {
        showSwiper();
        return false;
    }
});
$(window).orientationchange();

iphone上横竖版效果图:
竖版:

横版:

note2默认浏览器/qq浏览器
竖版:

横版:

note2/qq竖版的时候很不稳定,时好时坏,而且都会把页面放大,有没有遇到跟我类似情况的,求指示,不胜感激呀~~~~~~~


你用js控制宽度本身就是很不稳定的,保险的方法是老老实实用css百分比写

【热门文章】
【热门文章】