Question

所以我正在努力开发一个简单的移动网站。它会将QR码发送到下面链接的页面。问题是，当我在我的Android手机或苹果手机上查看它时，它增加了一个巨大的宽度。任何建议都会很棒。以下是实时版本的链接：http://www.trileafweb.com/promotion/index.html

这是HTML / CSS

促销

    <style>
        html,body
        {
            width: 400px;
            height: 200px;
        }
        h1{color:#00a94f;
            text-align:center;}
        p{
            font-weight:bold;
            font-size: 14;
            text-align:center;
            font-family:Arial;}
        img{
            position:relative;
            height:100px;
            width:200px;
            padding-left:100px;}
        #coupon{
            padding-top:15px;
            position:relative;
            border: 3px dashed;
            width: 400px;
            height:200px;
            border-radius:5px;}
    </style>
</head>

<body>
    <div id="coupon">
        <h1>Promotion</h1>
        <p>Promotion Texts</p>
        <p>Coupon Code: <span style="color:red; font-size:24;">xxx-xxx</span></p>
    </div>
</body>

Answer 1

您是否包含一个元标记，告诉移动浏览器您了解其视口的工作原理？像这样：

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

More information about why this is necessary:

如果你从逻辑上考虑它，它似乎有意义：移动Safari看了一下页面，并假设它是一个专为桌面设计的文档，绝大多数网站都是如此。因此，它为网站提供了980像素的宽度，并将其缩小。这就是为什么在我们放大页面之前我们无法阅读任何内容....

但这不好！我们需要做的是告诉浏览器该网页针对移动设备进行了优化。这就是视口元素出现在图片中的地方。

移动开发和宽度

1 个答案: