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

我有一个590px宽的手机页面。因此，我将视口设置为：

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

当我第一次以纵向或横向方式访问页面时，它看起来很好。这一页正好填满了宽度。但当我改变方向时，视口不会改变。当我从纵向转到横向时，视口比590px宽，反之亦然

仅在Galaxy S2上测试使用设备宽度：

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

---

这可以处理方向的变化。

我很确定你只能用JS在银河系中拾取方向的变化。 试试下面的代码片段

---

从相关职位：

---

这听起来和我遇到的问题一模一样。我找不到一个统一的答案，所以不得不拼凑一个

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

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

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

---

经过几个小时的尝试，这对我来说是有效的。出于某种原因，在我的手机上，最初的刻度=1搞砸了，但0.25起作用了？！我希望它对您有用，或者至少提供了一个良好的起点。

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

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

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

---

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

---

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

---

这对我来说很有效（在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();
});

var resize=function（）{
$（‘body’）.removeClass（‘横向’）.removeClass（‘纵向’）.addClass（方向）.css（‘宽度’，$（窗口）.width（）+‘px’）；
}
var方向=null；
var onOrientationChange=函数（）{
开关（窗口方向）{
案例-90：
案例90：
方向=‘景观’；
打破
违约：
方向=‘纵向’；
打破
}
如果（屏幕宽度<768）{
如果（方向==“横向”）{
变量刻度=数学圆（屏幕高度/600*10）/10；
$（“#元视口”）.attr（'content'，'width=600px，初始比例='+scale+'，最大比例='+scale+'，最小比例='+scale+'，用户可缩放=no'）；//横向移动
}否则{
变量刻度=数学圆（屏幕宽度/400*10）/10；
$（“#元视口”）.attr（'content'，'width=400px，初始比例='+scale+'，最大比例='+scale+'，最小比例='+scale+'，用户可缩放=no'）；//纵向移动
}
}否则如果（屏幕宽度>=768&&screen.width<1200）{
变量刻度=数学圆（屏幕宽度/960*10）/10；
$（“#元视口”）.attr（'content'，'width=960px，初始比例='+scale+'，最大比例='+scale+'，最小比例='+scale+'，用户可缩放=否'）；
}否则如果（屏幕宽度>=1200）{
$（“#元视口”）.attr（'content'，'width=设备宽度，user scalable=yes'）；
}
调整大小（）；
}
$（文档）.ready（函数（）{
$（窗口）。调整大小（调整大小）；
$（窗口）.bind（'orientationchange'，onOrientationChange）；
onOrientationChange（）；
});

希望有帮助
 但是当我使用“设备宽度”时，第一次显示的页面并不正确。590px框看起来比设备宽度大哦，我明白了，你想缩放内容以适应你的屏幕。你的页面上有比590px大的吗？试着不要使用viewport元标记，只需删除它。是的，这就是我想要的。我所拥有的只是590px div。尝试不使用viewport-box不会填充所有宽度尝试另一件事：通过cssMight将body的max width设置为590px可能有点晚了，或者您可能已经找到了解决方法，但您可以尝试这样的方法：它将使页面比设备宽度大120%。如果可行，只需调整初始比例，使其符合您的需要。好的，没关系。但是，一旦我检测到方向发生了变化，我如何调整视口呢？将一个类设置为html，然后在CSS中使用.cratital或.scape:if（is_-cratital（））{document.getElementTagName（“html”）.setAttribute（“class”，“cratital”）；}否则if（is_-scape（））{document.getElementTagName（“html”）.setAttribute(但是我不想改变css。我有一个590px的盒子，就是这样。我不能被改变。但是我想使用设备的功能使页面适合屏幕
<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');

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