Как определить размер HTML-элемента веб-страницы для телефона и планшета

Question

Привет, мой вопрос довольно широк, и я новичок во всех этих мобильных разработках, но в настоящее время я пишу веб-страницу, для которой пользователь подключится через свое приложение, чтобы увидеть контент (через веб-просмотр), мой вопрос .... поэтому, когда я устанавливаю изображение 100px на 100px,

1. что это значит на iphone (меньший экран) по сравнению с ipad (больший экран)?
2. масштабирует ли устройство еговверх или вниз автоматически?
3. программист, как и я, как мне узнать, какой «лучший» размер для макета и элемента, который я создаю?то есть как я узнаю, что мой элемент достаточно мал, чтобы уместиться на экране iphone, но достаточно большой, чтобы пропорционально отображаться на ipad?
4. как указать поля ...?

Пожалуйста, помогите спасибо

Answer 1

На iPhone, по-моему, по умолчанию предполагается, что ширина области просмотра составляет около 800 пикселей, если вы не укажете ширину области просмотра в заголовке.Таким образом, по умолчанию страница при загрузке будет увеличиваться или уменьшаться до тех пор, пока ширина страницы 800 пикселей не заполнит экран.Вот почему, если вы сделаете скелеты "Привет, мир!"HTML-страница и загрузка ее на iPhone выглядят очень маленькими - это потому, что она предполагает, что ширина страницы составляет 800 пикселей, поскольку вы не сказали иначе.Я обычно использую <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> в своих заголовках, что делает ширину области просмотра равной ширине устройства.Возьми тот самый "Hello world!"страницу, которую вы написали, вставьте ее в заголовок и перезагрузите страницу на iPhone, и вы увидите, что она выглядит более разборчиво.(Также вы можете захотеть поиграть с этими свойствами масштаба в своих собственных проектах - они влияют на то, можете ли вы увеличивать или уменьшать масштаб.)

Важно, что на iPhone и iPod с дисплеями Retina они будут действовать какхотя это не сетчатки дисплея, так что нет ничего лишнего, чтобы написать, чтобы отформатировать ваш сайт для своих экранов.Поэтому, если вы разместите изображение размером 100x100 пикселей на своей странице, iPhone и iPod отобразят его как 100 фактических пикселей на 100 фактических пикселей;и на дисплеях сетчатки это будет размер, который был бы, если бы он был на дисплее без сетчатки, так что 200 фактических пикселей на 200 фактических пикселей на дисплее сетчатки.(Надеюсь, моя математика верна. Уже поздно.: P)

На iPad это почти то же самое.Размер экрана 1024x768, поэтому изображение размером 100x100px на вашей странице будет занимать 100 фактических пикселей на 100 фактических пикселей.И я понимаю (мне еще предстоит проверить лично), что дисплей сетчатки в новом iPad работает так же, как дисплеи сетчатки на iPhone / iPod, поэтому на этих устройствах ваше изображение размером 100x100 пикселей будет занимать 200 фактических пикселей на 200 реальных пикселей, ииз-за увеличенной плотности пикселей будет казаться тот размер, который был бы, если бы он был на дисплее без сетчатки.(если вы используете этот метатег или аналогичный)

Я склонен разумно использовать медиазапросы в CSS, чтобы адаптировать размер всего макета к разным размерам экрана.Вы даже можете использовать это для показа изображений с определенным размером для заданного диапазона размеров экрана.Это особенно полезно для мобильных устройств, поскольку вы можете подавать изображение с более низким разрешением в браузеры с меньшими областями просмотра.(Другой, несколько спорный перк - это возможность скрывать вещи с определенными размерами экрана с помощью свойства display: none CSS.) Этот метод называется «отзывчивым дизайном», и у ThinkVitamin есть довольно хороший учебник для начинающих с хорошим списком ссылок:различные ссылки в конце статьи.http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/

Поля применяются в CSS.Большую информацию о них можно найти на сайте W3Schools: http://www.w3schools.com/css/css_margin.asp

Answer 2

Если вы хотите создать адаптивный дизайн, вы должны начать создавать изображение, используя процент

<img alt="test" src"../test.jpg" width ="100%" height="auto">

или вы можете определить размер экрана и уменьшить изображение, используя JavaScript.

if($(this).width() > $(this).height()) { 
 $(this).css('width',MaxPreviewDimension+'px');
 $(this).css('height','auto');
} else {
 $(this).css('height',MaxPreviewDimension+'px');
 $(this).css('width','auto');
}

Иногда свойства css, такие как max-width / height и min-width, очень полезны.

Обратите внимание, что у каждой версии ipad и каждого iphone свой размер экрана, поэтому вы должны думать более гибко с адаптивным дизайном.