我已将以下元标记放入我的移动 HTML 中
<meta name = "viewport" content = "initial-scale = 1.0">
在我为移动版本编写 css 文件后,我意识到它在横向模式下看起来不太好,因为它具有不同的宽度尺寸。我在右侧有一个 160 像素的空白区域。
除了为横向模式编写一个单独的 css 文件之外,还有什么办法可以解决这个问题吗?
最佳答案
您还需要绑定(bind)方向改变事件。您可以使用此示例脚本执行此操作:
<script>
$(function(){
function orient() {
if (window.orientation == 0 || window.orientation == 180) {
$('.featured').css('display','none');
orientation = 'portrait';
return false;
}
else if (window.orientation == 90 || window.orientation == -90) {
$('.featured').css('display','block');
orientation = 'landscape';
return false;
}
}
$(window).bind( 'orientationchange', function(e){
orient();
});
})();
</script>
关于css - 具有相同 css 文件的不同屏幕方向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11456339/