网站不适合在手机屏幕上的全屏

当我在任何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

网站不适合在手机屏幕上的全屏

回答

相关问题