html5 - 为什么我的页面的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竖版的时候很不稳定，时好时坏，而且都会把页面放大，有没有遇到跟我类似情况的，求指示，不胜感激呀～～～～～～～