Question

我是CSS / HTML的新手。我创建了这个网站，我希望它在手机上看起来也不错。当我从我的iphone浏览网站时，它会以最大值滚动显示，来自frow（第一行 - £20凭证），srow（第二行 - at），trow（第三行 - £4.99）的文本非常小，不可读。怎么了？

.frow {
    font-size: 60px;
    font-weight:900;
}

.srow {
    margin-top:10px;
    line-height:5px;
    font-size: 45px;
    font-weight: 600;
}
.trow {
    color:  #FF0000;
    text-shadow: 2px 2px #000;
    font-size: 100px;
    font-weight: 900;   
}

Answer 1

您必须定义元视口才能以您希望的方式支持移动设备：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

将此内容包含在<head>中。如果视口没有定义其他内容，现代移动浏览器通常会缩小页面。使用视口时，页面不可伸缩（user-scalable=no），因此它看起来就像在小窗口上打开一样。

如果尚未进行下一步，则可以在小屏幕分辨率上使用该页面。为了实现这一点，CSS媒体查询可能会有所帮助。

关于viewport元标记：http://html5-mobile.de/blog/meta-viewport-fuer-mobile-anpassen

关于CSS媒体查询：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

您可以尝试使用来自http://getbootstrap.com/的Twitter引导框架，而不是硬编码长度，这可以轻松创建适合移动设备的布局。

网站在手机上看起来不太好

2 个答案: