移动开发和宽度答案

【问题标题】：Mobile Development and Width移动开发和宽度
【发布时间】：2011-08-16 02:07:18
【问题描述】：

所以我正在尝试开发一个简单的移动网站。它会通过二维码跳转到下面链接的页面。问题是当我在我的安卓手机或苹果手机上查看它时，它会增加一个巨大的宽度。任何建议都会很棒。这是现场版的链接：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>

【问题讨论】：

标签： html css mobile cross-browser

【解决方案1】：

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

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

More information about why this is necessary:

如果您从逻辑上考虑，这似乎是有道理的：移动版 Safari 浏览了该页面并假设它是为桌面设计的文档，绝大多数网站都是如此。所以它给了网站一个 980 像素的宽度，并把它缩小了。这就是为什么我们在放大页面之前无法阅读任何内容....

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

【讨论】：

法律，谢谢你的作品。时间到了我会检查你的答案^_^