所以我正在尝试开发一个简单的移动网站。它会跳转到下面链接的页面的二维码。问题是当我在我的安卓手机或苹果手机上查看它时，它会增加一个巨大的宽度。任何建议都会很棒。这是实时版本的链接: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>
最佳答案
您是否包含一个元标记，告诉移动浏览器您了解它们的视口(viewport)如何工作？像这样:
<meta name="viewport" content="width=device-width" />
More information about why this is necessary:
If you think about it logically, it seems to make sense: mobile Safari took a look at the page and assumed it was a document designed for the desktop, which is true of the vast majority of websites. So it gave the website a width of 980 pixels and presented it zoomed out. Which is why we can’t read anything until we zoom into the page....
But this is no good! What we need to do is tell the browser that this webpage is optimized for mobile. And this is where the viewport metatag comes into the picture.
关于html - 移动开发与宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7068698/