Question

我的网站的移动版本太过分了。出于某种原因，在使用chrome调用网站并省略“initial-scale = 1”时我没有这个问题。肯定存在一些错误，因为Google响应式检查的结果是：内容大于显示。

我已经尝试过任何与视口的组合，例如min-scale，max-scale，shrink-to-fit = no或为内容设置固定的witdh大小。

HTML

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <we:css id="4" /><we:css id="5" />
    <we:content name="head" />      
</head>
<body>
    <a name="top"></a>
    <div id="wrap-outside"><div id="wrap-inside">
        <div id="header">
            <div id="header-left"><we:img ...</div>
            <div id="header-right">
                <div id="office"><we:a id="6"><we:img name="officetitle" id="18" showcontrol="false" border="0" /></we:a></div>
                <div id="navibar"><div id="navibar-content"><we:include id="5" type="template" /></div></div>
            </div>
            <div class="clear"></div>
        </div>
        <div id="content">
            <div id="left" >
                <we:include id="4" type="template" />
                <div id="links-call"><a href="tel:040 27163906"><img src="/images/picture1.png"></a></div>
            </div>
            <div id="right"><we:content /></div>
            <div class="clear"></div>
            <div id="footer"><p><we:a id="15">Impressum</we:a></p></div>
        </div>
        </div></div>

CSS

@media only screen and (max-width: 500px) {

#text{
    font-size:190%;
}

#header-right{
    width:100%;
}

#header-left{
    display:none;
}

#navbar{
position: relative;
width:100%;
}

#content-left{
display:none;
}

......依旧

响应式移动网站的缩放问题

0 个答案: