모바일 개발 및 너비

그래서 간단한 모바일 웹 사이트를 개발하려고합니다. 아래 링크 된 페이지로 QR 코드가 전송됩니다. 문제는 내 안드로이드 폰에서 보거나 사과 폰에서 거대한 너비를 더하는 것입니다. 어떤 제안이라도 좋을 것입니다. 여기 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 name="viewport" content="width=device-width" />

More information about why this is necessary:

, 그것은 의미 할 것 같다 : 모바일 사파리 페이지에서 확인해 보니 데스크탑 용으로 설계된 문서이었다 가정, 이는 대부분의 웹 사이트에 해당합니다. 그래서 웹 사이트에 980 픽셀의 너비를 부여하고 줌 아웃했습니다. 그래서 우리가 페이지를 확대 할 때까지는 아무 것도 읽을 수없는 것입니다. ...

그러나 이것은 좋지 않습니다! 우리가해야 할 일은이 웹 페이지가 모바일 용으로 최적화되어 있다는 것을 브라우저에 알려주는 것입니다. 그리고 이것은 뷰포트 메타 태그가 그림으로 들어오는 곳입니다.

출처

2011-08-15 18:07:18 sdleihssirhc

lawl, 고마워요. 시간 제한이있을 때 답을 확인해 보겠습니다^_ ^ –

모바일 개발 및 너비

답변

관련 문제