Viewport только для телефонов

Question

Я пытаюсь сделать отзывчивый макет, который имеет вид телефона и обычный вид (т. Е. Планшеты должны загружать страницу в обычном режиме).

Все работает корректно, пока CSS не работает, однако окно просмотра затягивает масштабирование на планшетах, когда они находятся в портретном режиме. (Они увеличены до ширины их пикселей)

Есть ли способ заставить планшеты уменьшать масштаб до полной страницы, сохраняя при этом размеры загружаемых телефонов до их размера?

Вот что у меня есть ... Изменение начального масштаба до 0,75 почти работает, но тогда iPhone загружает обычный сайт, когда в ландшафте, которого я не хочу.

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

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 568px)" href="css/mobile-styles.css" /> 

Answer 1

Не связывайтесь с окном просмотра, это может вызвать проблемы с головной болью и доступность. Вместо этого создайте CSS, который вы хотите для телефонов (маленькие экраны), а затем добавьте стили для «полного» сайта (большие экраны) в запросе медиа-запроса min-width:500px (или какой-либо другой точки останова).

Пример CSS:

/*this will fire for any size screen*/ 
nav{ 
    width:100%; 
} 

/*this changes the above styles for any screen over 500px*/ 
@media (min-width:500px){ 
    nav{ 
    width:50%; 
    float:left; 
    } 
}