HTML-страница не помещается на экране мобильного устройства

Вот мой HTML:HTML-страница не помещается на экране мобильного устройства

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, user-scalable=no"> 
    <title>Test</title> 
    <style type="text/css"> 
     body { 
      font-size: 40px; 
     } 

     .screen { 
      font-size: 0.5em; 
      margin: 0; 
      background-color: red; 
      position: absolute; 
      width: 8em; 
      height: 19em; 
      left: 0; 
      top: 0; 
     } 

     .screen .main { 
      width: 100%; 
      height: 100%; 
     } 
    </style> 
</head> 
<body> 
    <div class="screen"> 
     <div class="main">Ut enim benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus.</div> 
    </div> 
</body> 
</html>

Хотя моя мета-тег для видового экрана масштабируется к устройству ширине, эта страница не помещается на экране: Есть еще белым границы (на моей Галактике S3). Я хочу, чтобы он был полностью красным.

Что мне нужно сделать, чтобы эта страница полностью соответствовала моему экрану? (и большинство устройств экраны)

я полный новичок в разработке мобильных приложений, спасибо

источник

2014-01-16 Harkonnen

в дополнение к ответу BenM «s, установите это в CSS, чтобы удалить стиль по умолчанию из браузеров

html, body { 
    font-size: 40px;  
    margin:0; /* remove default margin */ 
    padding:0; /* remove default padding */ 
    width:100%; /* take full browser width */ 
    height:100%; /* take full browser height*/ 
}

настолько полной сотовыми:

.screen { 
       font-size: 0.5em; 
       margin: 0; 
       background-color: red; 
       position: absolute; 
       width: 100% /* BenM mentioned this in answer*/ 
       height: 100%; /* take full browser height */ 
       left: 0; 
       top: 0; 
      } 

    .screen .main { 
       width: 100%; /* <--now this takes full browser dimension */ 
       height: 100%; /* <--now this takes full browser dimension */ 
      }

источник

2014-01-16 13:25:08 NoobEditor

очень приятно, спасибо – Harkonnen

Вы устанавливаете ширину .screen в 8em, обновлять, что 100%:

.screen { 
    font-size: 0.5em; 
    margin: 0; 
    background-color: red; 
    position: absolute; 
    width: 100%; 
    height: 19em; 
    left: 0; 
    top: 0; 
}

You» LL также (возможно, если вы не используете сброс CSS) нужно удалить margin и padding на body:

body { 
    font-size: 40px; 
    margin: 0; 
    padding: 0; 
}

источник

2014-01-16 13:24:09 BenM

Попробуйте

body { 
margin:0; 
padding:0; 
}

источник

2014-01-16 13:24:49

+1 за 19 секунд! :) – NoobEditor

HTML-страница не помещается на экране мобильного устройства

ответ

Смежные вопросы