Html 移动站点 - 在方向改变时重置视口

mobile site - reset the viewport on orientation change

提问by Moshe Shaham

I have a mobile page that is 590px wide. So I set the viewport like this:

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

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

When I first visit the page either in portrait or landscape - it looks fine. The page fills the width exactly. But when I change orientation the viewport doesn't change. When I go from portrait to landscape the viewport is wider than the 590px, and vice versa.

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

Tested only on Galaxy S2

仅在 Galaxy S2 上测试

回答by Pete.K

This sounds exactly like the problem I was having. I couldn't find a consolidated answer so had to piece one together.

这听起来就像我遇到的问题。我找不到统一的答案，所以不得不拼凑起来。

First, any CSS that appeared different on portrait and horizontal had to be put into it's own @media tag. It's important to right out the whole class into each @media selector, not just the bits that are different. CSS that is common to both views can got at the top. My device width was showing at 580 so I set the cut-off at 600 - you can set it to what you feel is right for you.

首先，任何在纵向和横向上看起来不同的 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
}

Next was the viewport settings. I put this code as standard into each of my page heads (the size is my Mobile Phone Portrait size). It needs the meta there so that the javascript can get to it later.

接下来是视口设置。我将此代码作为标准放入每个页眉（大小是我的手机纵向大小）。它需要那里的元数据，以便 javascript 稍后可以访问它。

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

Finally I had to use some Javascript to re-write the viewport settings when the page detected a rotation of the phone (thanks to Vinayak.B Original Article)

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

    //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);
    }

After HOURS of trying things out, this is what worked for me. For some reason on my phone, the initial-scale=1 screwed it up but 0.25 worked?! I hope it works for you or at least offers a good starting point.

经过数小时的尝试，这对我有用。出于某种原因，在我的手机上，initial-scale=1 搞砸了，但 0.25 有效？！我希望它对你有用，或者至少提供了一个很好的起点。

回答by gabitzish

Use device-width :

使用设备宽度：

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

This handles orientation changes.

这将处理方向更改。

回答by maestroosram

This is what worked for me (tested in both iOS Safari and Chrome).

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

I wanted to force viewport to 400px in portrait mode and to 600px in landscape mode.

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

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();
});

Hope it helps!

希望能帮助到你！

回答by hoppipolla

Had the same issue, this was my solution.

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

Reload the page after orientation change, then set viewport variables based on new orientation.

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

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;
  }
}

回答by Ryan Price

the matchMedia function works really well on Android in my testing:

在我的测试中，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 */
}

回答by Ratnakar

Reset the viewport after orientation change. This JS could work, provided you have

方向更改后重置视口。这个 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');

回答by The John Smith

I'm pretty certain you can only pickup the orientation change in the Galaxy using JS. Try the snippet below.

我很确定您只能使用 JS 来获取 Galaxy 中的方向变化。 试试下面的片段。

---

---

From a related post: Orientation change in Android using javascript

来自相关帖子：Android 中的方向更改使用 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;
}