настроить веб-страницу под любое устройство

0

Этот тег <meta name="viewport" content="width=device-width; initial-scale=1.0"> работает в веб-приложениях, работающих на android? или его просто для iphone?

и это фрагмент кода css

body 
{
padding:20px;
background-color:#ffffff;
font: normal .80em arial, sans-serif;
 background-color: #FFCC66;
 margin: -10px;
 padding: 0px;
 width:96%;


}

#wrapper
{
width:100%;

}

обертка не дает никакого результата.

Теги:
meta

1 ответ

0

Да, это для Android и iOS. Я добавил несколько источников ниже для тех, кто хочет понять это немного лучше.

ПРИМЕЧАНИЕ. Не просто полагайтесь на этот маленький тег HTML! В зависимости от того, что вы делаете, вам, возможно, придется использовать некоторый CSS или Javascript/JQuery.

У вас есть противоречивый код.
Я уверен, вы знаете, что все, что вы вставляете, входит в ваше тело. Вот почему я не уверен, почему вы устанавливаете маржу на -10px, что означает, что все, что вы вставляете, будет следовать. Кроме того, по умолчанию цвет тела установлен на белый, что опять-таки мне интересно, почему вы добавили это в дополнение к двум свойствам заполнения.
Вы заявили, что хотите, чтобы веб-страница соответствовала любому устройству. Посмотрев на свой код по номиналу, похоже, что вы схватили кусочки и собрали его без каких-либо знаний относительно него. Страница школьных консорциумов World Wide Web (W3C) - отличное место для изучения кода, так как они работают во всемирной паутине.

Вот некоторые CSS, чтобы начать с того, что вы хотите сделать, сделав вашу страницу отзывчивой.

body {
    margin:0;
    padding:0;
    width: 100%;
    height: 100%;
    font: normal .80em arial, sans-serif;
}

Теперь я могу ошибаться в том, что я сказал ранее, глядя на ваш код по номиналу. Однако, если вы хотите иметь гибкую компоновку при выполнении функций Javascript. Я нахожу использование JQuery, и JQuery Mobile очень удобен. Это экономит огромное количество времени кодирования, и оно построено так, чтобы быть отзывчивым, поэтому вам не нужно писать и убедиться, что этот div имеет x дополнение для соответствия IE. Там доступно множество API, которые делают использование JQuery и JQuery Mobile простым в использовании. Все требует обучения, поэтому проверьте это, если вы этого не сделали.

Здесь хороший стартовый код с использованием JQuery и JQuery Mobile.

<!DOCTYPE html>
<html>
<head>
<title>Site Name</title>
<meta http-equiv='Content-Type' charset='utf-8' content='text/html;charset=ISO-8859-1'>
<meta content='yes' name='apple-mobile-web-app-capable'>
<meta content='default' name='apple-mobile-web-app-status-bar-style'>
<meta content='width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
<link rel='stylesheet' href='/jquery.mobile-1.3.1.min.css'>
<script src='/jquery-1.9.1.min.js' type='text/javascript'></script>
<script src='/jquery.mobile-1.3.1.min.js' type='text/javascript'></script>
<style type='text/css'>
/* CSS Here */
</style>
<script type='text/javascript'>
$(function() {
    // JQuery here. If you need help refer to jquery.com
});
</script>
</head>
<body>
<div data-role='page'>
    <div class='header' data-role='header'>
        <h1>Site Name</h1>
    </div>

    <div class='content' data-role='content'>

    </div>
</div>
</body>
</html>

Источники:
http://www.w3schools.com/
http://jquery.com/
http://jquerymobile.com/
Использование метатега viewport для управления макетом в мобильных браузерах
Прекратите использование метатега viewport (пока вы не узнаете, как его использовать)

Поделиться
  • 0
    я просто не хочу получать горизонтальную полосу прокрутки, какой бы размер экрана не был увеличен.
  • 0
    Вы пытались скрыть это в CSS? переполнение-х: скрыто;
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню