網站不適合在手機屏幕上的全屏

當我在任何Android手機上測試我的開發網站時，該網站不適合在手機屏幕上的全屏。附件是快照。我只是想讓它移動友好。網站不適合在手機屏幕上的全屏

我正在使用wordpress與Twitter Boostrap使我的網站。在我的頭標上，我有幾個meta標籤，我在互聯網上找到了移動友好的網站。請注意，這不是一個響應式網站。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9,chrome=1">

請幫忙嗎？

Android Mobile Device, Site not fully fitting to the mobile screen size

來源

2013-09-24 user1772571

你有鏈接到你的頁面或小提琴演示嗎？ – insertusernamehere

在容器/包裝上添加一個最小寬度.. – reikyoushin

如果您的容器寬度不是基於百分比，那麼它將不起作用。搜索媒體查詢教程以更好地理解。 – RaphaelDDL

我最近有在平板電腦/手機同樣的問題，修好了與下面的代碼片段。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style> 
    @-webkit-viewport { width: device-width; } 
    @-moz-viewport { width: device-width; } 
    @-ms-viewport { width: device-width; } 
    @-o-viewport { width: device-width; } 
    @viewport { width: device-width; } 
</style> 
<script> 
    // Important for windows phone 8 
    if (navigator.userAgent.match(/IEMobile\/10\.0/)) 
    { 
     var msViewportStyle = document.createElement("style"); 
     msViewportStyle.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}")); 
     document.getElementsByTagName("head")[0].appendChild(msViewportStyle); 
    } 
</script>

來源

2013-09-24 20:56:47

確保您使用Bootstrap附帶的響應類，以便允許在Bootstrap框架內進行設計。在Bootstrap中，所有內容都位於12「列」網格上，然後根據該網格進行分割。

在自舉2.x的

<div class="container"> 
    <div class="row"> 
    <div class="span6"> 
     Content here 
    </div> 
    <div class="span6"> 
     Content here 
    </div> 
    </div> 
</div>

會產生跨越頁面寬度兩個div。

在Bootstrap 3中，他們稍微改變了他們的類名以適應不同的窗口大小。同樣的例子，只要你是在移動，設備將是：

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-6"> 
     Content here 
    </div> 
    <div class="col-xs-6"> 
     Content here 
    </div> 
    </div> 
</div>

您可以通過以下步驟刪除引導3響應： http://getbootstrap.com/getting-started/#disable-responsive

更多信息可以在這裏找到：http://getbootstrap.com/css/#grid

來源

2013-09-24 21:35:12 Patrick

我知道這是一個老問題，但因爲它在谷歌顯示了，我想我會分享我想出瞭解決辦法，如果任何人需要它：

如果您的網站未再有吸引力的，你不需要額外的頭標記。嘗試刪除它們，它應該按預期工作。

來源

2014-08-01 08:29:57 giorgos

如果您在設計響應式網站，但想要「移動」網站的寬度（即800px最大寬度），我發現我唯一的解決方案是更新初始縮放大小。對我來說很好的是這樣的，注意「初始規模」的價值：

<meta name="viewport" content="width=device-width, initial-scale="0.4">

希望這可以幫助別人！

來源

2014-09-14 22:24:41 yogibear

網站不適合在手機屏幕上的全屏

回答

相關問題