文章/答案/技术大牛

发布

问移动开发和宽度
EN

Stack Overflow用户

提问于 2011-08-16 02:05:00

回答 1查看 243关注 0票数 0

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

下面是HTML/CSS

            Promotion

    <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

Stack Overflow用户

回答已采纳

发布于 2011-08-16 02:07:18

你是否包含了一个meta标签，告诉移动浏览器你理解他们的视窗是如何工作的？如下所示：

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

More information about why this is necessary:

如果你从逻辑上考虑，这似乎是有道理的: mobile Safari查看了页面，并假设它是为桌面设计的文档，这在绝大多数网站上都是正确的。因此，它为网站提供了980像素的宽度，并将其缩小。这就是为什么我们不能阅读任何东西，直到我们放大页面....

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

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/7068698

复制

相似问题

问移动开发和宽度
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问移动开发和宽度EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问移动开发和宽度
EN