移动网站 - 在方向更改时重置视口

时间：2012-04-19 21:18:02

标签： html5 mobile viewport

我有一个590像素宽的移动页面。所以我像这样设置视口：

<meta name = "viewport" content = "width = 590">

当我第一次以纵向或横向访问该页面时 - 它看起来很好。页面完全填充宽度。但是当我改变方向时，视口不会改变。当我从纵向移动到横向时，视口比590px宽，反之亦然。

仅在Galaxy S2上测试

7 个答案:

答案 0 :(得分：6)

这听起来和我遇到的问题完全一样。我找不到合并的答案，所以不得不把它拼凑起来。

首先，任何在纵向和横向上看起来不同的CSS都必须放入它自己的@media标签中。将整个类放到每个@media选择器中是很重要的，而不仅仅是不同的位。两个视图共有的CSS可以位于顶部。我的设备宽度显示为580，因此我将截止设置为600 - 您可以将其设置为您认为适合您的设置。

    // All CSS that is common to both

@media all and (min-device-width:601px)and (orientation:landscape){
    // All CSS for Landscape and Desktop
}
@media only screen and (max-device-width:600px)and (orientation:portrait){
    // All CSS for Portrait view
}

接下来是视口设置。我把这个代码作为标准放入我的每个页面头（尺寸是我的手机肖像尺寸）。它需要meta，以便javascript以后可以使用它。

<meta name="viewport" id="viewport" content="width=480, initial-scale=0.25, maximum-scale=1.0;" />

最后，当页面检测到手机旋转时，我不得不使用一些Javascript重新编写视口设置（感谢Vinayak.B Original Article）

    //Code to display on mobiles
    //========================================

    var swidth = window.screen.width;
    //These were the values of my website CSS container for portrait and landscape
    var vpwidth = 480;
    var vlwidth = 960;

    updateOrientation();

    window.addEventListener('orientationchange', updateOrientation, false);

    function updateOrientation() {


      var viewport = document.querySelector("meta[name=viewport]");

      switch (window.orientation) {
        case 0: //portrait
          //set the viewport attributes to whatever you want!
            viewport.setAttribute('content', 'width=' + vpwidth + ', initial-scale=0.25, maximum-scale=1.0;')
          break;
        case 90: case -90: //landscape
          //set the viewport attributes to whatever you want!
            viewport.setAttribute('content', 'width=' + vlwidth + ', initial-scale=0.25, maximum-scale=1.0;')
          break;
        default:
          //set the viewport attributes to whatever you want!
            viewport.setAttribute('content', 'width=' + vpwidth + ', initial-scale=0.25, maximum-scale=1.0;')
          break;
      }
        //alert(swidth + ' lead to an initial width of ' + vpwidth + ' and a rotate width of ' + vlwidth);
    }

经过一段时间的努力，这对我有用。由于某种原因，我的手机上的初始比例= 1搞砸了，但0.25工作了吗？！我希望它对你有用，或者至少提供一个很好的起点。

答案 1 :(得分：2)

使用device-width：

<meta name = "viewport" content = "width=device-width">

这会处理方向更改。

答案 2 :(得分：1)

有同样的问题，这是我的解决方案。

更改方向后重新加载页面，然后根据新方向设置视口变量。

window.onorientationchange = function() {
  /*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the
    left, or landscape mode with the screen turned to the right. */
  var orientation = window.orientation;
  switch(orientation) {
    case 0:
        var current = $('body').attr('class');
        if(current != 'ps-active'){
            location.reload();
        }

        break; 

    case 90:
        var current = $('body').attr('class');
        if(current != 'ps-active'){
            location.reload();
        }
        break;

    case -90: 
        var current = $('body').attr('class');
        if(current != 'ps-active'){
            location.reload();
        }
        break;
  }
}


 $(document).ready(function() {
window.onload = function() {
  /*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the
    left, or landscape mode with the screen turned to the right. */
  var orientation = window.orientation;
  switch(orientation) {
    case 0:

        viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute('content', 'width=device-width; initial-scale=0.2; maximum-scale=1.0; user-scalable=yes;');
        $('.container').show();
        break; 

    case 90:
        viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute('content', 'width=device-width; initial-scale=0.4; maximum-scale=1.0; user-scalable=yes;');
        $('.container').show();
        break;

    case -90: 
        viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute('content', 'width=device-width; initial-scale=0.4; maximum-scale=1.0; user-scalable=yes;');
        $('.container').show();
        break;
    default:
        $('.container').show();
        break;
  }
}

答案 3 :(得分：1)

这对我有用（在iOS Safari和Chrome中都经过测试）。

我想在纵向模式下将视口强制为400px，在横向模式下强制为600px。

var resize = function() {
    $('body').removeClass('landscape').removeClass('portrait').addClass(orientation).css('width', $(window).width() + 'px');
}

var orientation = null;

var onOrientationChange = function () {
    switch(window.orientation) {  
        case -90:
        case 90:
            orientation = 'landscape';
        break; 
        default:
            orientation = 'portrait';
        break;
    }

    if(screen.width < 768) {
        if(orientation == 'landscape') {
            var scale = Math.round(screen.height / 600 * 10) / 10;
            $('#meta-viewport').attr('content', 'width=600px, initial-scale='+scale+', maximum-scale='+scale+', minimum-scale='+scale+', user-scalable=no'); // landscape mobile
        } else {
            var scale = Math.round(screen.width / 400 * 10) / 10;
            $('#meta-viewport').attr('content', 'width=400px, initial-scale='+scale+', maximum-scale='+scale+', minimum-scale='+scale+', user-scalable=no'); // portrait mobile
        }
    } else if(screen.width >= 768 && screen.width < 1200) {
        var scale = Math.round(screen.width / 960 * 10) / 10;
        $('#meta-viewport').attr('content', 'width=960px, initial-scale='+scale+', maximum-scale='+scale+', minimum-scale='+scale+', user-scalable=no');
    } else if(screen.width >= 1200) {
        $('#meta-viewport').attr('content', 'width=device-width, user-scalable=yes');
    }

    resize();
}

$(document).ready(function() {
    $(window).resize(resize);
    $(window).bind('orientationchange', onOrientationChange);
    onOrientationChange();
});

希望它有所帮助！

答案 4 :(得分：0)

在我的测试中，matchMedia功能在Android上运行得非常好：

var mql = window.matchMedia("(orientation: landscape)");
if (mql.matches) {
  /* The device is currently in landscape orientation */
}
else {
  /* The device is currently in portrait orientation */
}

答案 5 :(得分：0)

更改方向后重置视口。如果你有

，这个JS可以工作 
<meta name="viewport/>

var maxWidth = screen.width;
var viewport = document.getElementsByName('viewport')[0];
viewport.setAttribute('content', 'width = ' + maxWidth + ', minimum-scale=1.0, maximum-scale=1.0, user-scalable=no');

答案 6 :(得分：-1)

我很确定你只能使用JS来取代Galaxy中的方向变化。 试试下面的代码。

来自相关帖子：Orientation change in Android using javascript 

function orientation_changed ()
{
    if ( is_portrait() )
    {
        //do something
    }
    else if ( is_landscape() )
    {
        // do something else
    }
    clearTimeout(window.t);
    delete window.t;
}

window.t = undefined;
window.onorientationchange = function (event)
{
    window.t = setTimeout('orientation_changed();', 250);
}

function is_landscape()
{
    var uagent = navigator.userAgent.toLowerCase();
    if ( uagent.search('ipad') > -1 )
    {
        var r = ( window.orientation == 90 || window.orientation == -90 );
    }
    else
    {
        var r = ( screen.width > screen.height );
    }
    return r;
}
相关问题
最新问题