我要做一个横竖两个版本的页面,横竖版页面的内容是一样的,但样式不一样,竖版是一个正常的列表页面,横版的列表可以左右滑动,通过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百分比写