手機網站 - 重置方向更改視口

Question

我有一個590px寬的移動頁面。所以我設置這樣的視口：

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

當我第一次訪問該頁面的縱向或橫向 - 它看起來很好。該頁面完全填充寬度。但是當我改變方向時，視口不會改變。當我從縱向到橫向時，視口寬於590像素，反之亦然。

只在銀河S2

Answer 1

使用設備寬度測試：

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

該處理方向的變化。

Answer 2

我很確定你只能使用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; 
} 

Answer 3

這聽起來完全像我遇到的問題。我無法找到一個合併的答案，所以不得不拼湊在一起。首先，任何在縱向和橫向上出現不同的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;" /> 

最後，我不得不使用一些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); 
    } 

後的不斷嘗試新東西HOURS出來，這是對我有用的。出於某種原因，在我的手機上，初始縮放= 1搞砸了，但是0.25有效？！我希望它對你有用，或者至少提供一個好的起點。

Answer 4

有同樣的問題，這是我的解決方案。

在方向更改後重新加載頁面，然後根據新的方向設置視口變量。

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

Answer 5

的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 */ 
} 

Answer 6

重置視口方向更改後。這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'); 

Answer 7

這是什麼對我有用（iOS Safari和Chrome測試）。

我想在view模式下強制視口爲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(); 
}); 

希望它有幫助！