Как я могу сделать html-страницу автоматически подходящей для экранов мобильных устройств?

Я помещаю Formableable Form на html-страницу, используя , но я бы хотел, чтобы это был полный экран на мобильном устройстве. До сих пор я использую следующий код:Как я могу сделать html-страницу автоматически подходящей для экранов мобильных устройств?

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <style> 
    @import url(http://fonts.googleapis.com/css?family=Londrina+Sketch); 

    body { 
    background-color: #f3eedd; 
    width: 750px; 
    overflow:scroll; 
    overflow-x:hidden; 
    } 

h2 { 
    font-size: 20px; 
    color: #c13e18; 
    margin: 10px 30px 10px 30px; 
} 

</style> 
</head> 
<body> 
<div id="header"> 
<h2>Book Supheroes Unite</h2> 
</div> 
<div id="form"> 
<iframe src="http://challenge-the-box.com/wp-admin/admin-ajax.php?action=frm_forms_preview&form=sbyrt02 
" frameborder="0" scrolling="no" style="width:280px;height:535px;"></iframe></div> 
</html>

Я считаю, что это как-то связано с видовыми экранами? Однако я не совсем уверен в этом!

источник

2015-09-25 Marc

Сообщите мне, если метатег, предоставленный мной, разрешает вашу проблему. – Chris

Эй, @ Крис, meta работает, однако мне сложно провести время с iframe ... Это не похоже на автоматическое масштабирование, чтобы он соответствовал экрану устройства! – Marc

Хмммм, взгляните на [это] (http://stackoverflow.com/questions/11382473/resize-external-website-content-to-fit-iframe-width) Это похоже на новую проблему. – Chris

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Этот мета-тег позволяет настроить таргетинг на мобильные устройства и устанавливает ширину до размера экрана.

документация предоставляется here!

также рассмотреть возможность перехода к начальной загрузки основы CSS для Отзывчивый веб-дизайн! Twitter Bootstrap

источник

2015-09-25 12:46:05 Chris

-2

Вы можете использовать media queries! выглядит следующим образом:

@media (max-width: 640px) { 
    //your css to make it full screen 
}

источник

2015-09-25 12:44:50

Лично я хотел бы использовать библиотеку, такую как bootstrap, чтобы это добавило что-то подобное в голову.

<meta name="viewport" content="width=device-width, initial-scale=1">

Bootstrap позволяет создавать динамические сетки с контентом, независимо от размера устройства. Вы просто создаете divs внутри большего контейнера, например контейнера для жидкости:

<div class="container-fluid"> 
<div class="row"> 
    ... 
    </div> 
</div>

источник

2015-09-25 12:46:44 niallhaslam

Просто обратите внимание, что вам не нужен бутстрап для реализации этого метатега. – Chris

Как я могу сделать html-страницу автоматически подходящей для экранов мобильных устройств?

ответ

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