2017-02-15 2 views
1

Это похоже на простую проблему, с которой я, возможно, думал.Масштабировать всю страницу html под определенной шириной

У меня есть страница, которая хорошо масштабируется с помощью CSS, но мне нужно предотвратить ее обтекание текстом под шириной 360 пикселей. Идея заключалась в том, чтобы просто использовать те же пропорции страницы на ширине 360 пикселей, но «уменьшить масштаб» в определенном смысле с помощью окна просмотра. Использование окна просмотра мета-тег, чтобы установить это вызывает проблемы с шириной 320 пикселей телефонов (iPhone 5):

<meta name="viewport" content="width=device-width, min-width=360px, initial-scale=1.0"/> 

я делал это в сочетании с установкой мин ширины по фактической HTML этой страницы и тела , но содержимое под шириной 360 пикселей теперь требует прокрутки в сторону, чтобы просмотреть всю страницу, или ущипнуть и уменьшить масштаб.

html, body { 
    width: 100%; 
    min-width: 360px; 
} 

Есть ли простой ответ на этот вопрос?

ответ

0

вы можете установить размер шрифта в поле на процентное значение, чтобы оно масштабировалось с остальной частью страницы, если это элемент, который препятствует его сжатию.

0

Вы можете предотвратить обертку текста с помощью white-space: nowrap;.

body { 
 
    white-space: nowrap; 
 
} 
 

 
p { 
 
    width: 200px; 
 
    border: 1px solid pink; 
 
}
<p> 
 
    Text text text text text text text text text text text text text text text text text text text text text. 
 
</p>

При использовании white-space на <body> искалечил слишком много текста вы можете создать служебный класс и применять к элементам по мере необходимости.

.text-nowrap { 
    white-space: nowrap; 
} 
Смежные вопросы