移动开发和宽度

所以我想开发一个简单的移动网站。它将关闭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>

来源

2011-08-15 Howdy_McGee

你包括meta标签，告诉你理解了移动浏览器他们的视口如何工作？事情是这样的：

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

More information about why this is necessary:

如果您在逻辑想想，这似乎很有道理：移动Safari浏览器在页面看了看，以为这是专为桌面文档，绝大多数网站都是如此。所以它给了该网站980像素的宽度，并呈现出来缩小。这就是为什么我们不能读取任何东西，直到我们放大页面....

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

来源

2011-08-15 18:07:18 sdleihssirhc

lawl，谢谢你的工作。我会在时间限制^ _ ^时检查你的答案 –

移动开发和宽度

回答

相关问题