Блог

Главная - Вопросы по программированию - Медиа-запрос для целевых планшетов и мобильных устройств

Медиа-запрос для целевых планшетов и мобильных устройств

#html #css #asp.net-mvc-4 #jquery-mobile

#HTML #css #asp.net-mvc-4 #jquery-мобильный

Вопрос:

Мы разрабатываем веб-приложение. Основная задача — настроить таргетинг на планшеты с разным разрешением и браузеры. Некоторые из них — Android 5, 7 и 10 дюймов и iPhone 5, 7 и 10 дюймов. Мы используем jQuery Mobile и MVC для таргетинга на разные браузеры, но для таргетинга на другое разрешение мы обнаружили, что медиа-запрос будет полезен для настройки размера шрифта, ширины div и т. Д..

Какую ширину медиа-запроса я должен указать?

 @media screen and (min-width: 768px)
{
}

Минимальная и максимальная ширина для Android 5, 7 и 10 дюймов и iphone 5,7,10?

Я видел другой вопрос о переполнении стека, но не удовлетворен ответом, который они дали.

Комментарии:

1. JQM реагирует на любое разрешение. Просто не забудьте добавить мета-тег viewport.

2. Вы хотите, чтобы приложение было адаптивным — чтобы, если вы разместите окно браузера того же размера, что и телефон, они выглядели бы одинаково?

3. @Omar ya JQM выглядит великолепно. но как определить размер шрифта для надписей? ярлык с размером шрифта в% хорошо смотрится на 10-дюймовом планшете, но становится 2 строками на 7-дюймовом планшете.

4. @wildandjam: да.. но теперь мы поддерживаем только планшет

5. Я спрашиваю только потому, что max-width даст вам это, тогда как max-device-width даст другой опыт. Поэтому придерживайтесь максимальной ширины. Есть кое-что о плотности пикселей, позвольте мне попытаться получить ссылку для вас …. cssmediaqueries.com/target

Ответ №1:

Это руководство из CSS tricks — надеюсь, это поможет

/ * Смартфоны (портретные и альбомные) ———— / @ экран только для мультимедиа и (минимальная ширина устройства : 320 пикселей) и (максимальная ширина устройства : 480 пикселей) { / Стили */ }

 /* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}