максимальная высота кузова; соотношение сторон; zoom

Question

Я написал красиво-отзывчивое веб-приложение C# -MVC, предназначенное для ноутбуков (среда компиляции и альфа-тестирования); однако после развертывания он не отображается правильно на устройствах Android. Текст крошечный, когда устройства переворачиваются в портрет. Я потратил около дня на взломать полуэстетичный вертикально отзывчивый дизайн для Android, когда у меня было то, что, надеюсь, является прозрением. Можно ли установить максимальную высоту тела и автоматически увеличить страницу? Есть ли у кого-нибудь опыт в этой идее, кто может мне помочь? Я бы просто сделал это и протестировал, но для этого требуется, чтобы я действительно совершил и вернул предыдущую версию, а затем снова переместился с Xamarin на VS (если это возможно, тогда это самый простой способ, иначе это огромная инвестиция времени). Целевым устройством является Samsung S4, поэтому я могу использовать любые средства просмотра или масштабирования, которые он поддерживает.

ПРИМЕЧАНИЕ. Я останусь открытым этот вопрос, если кто-то придумает другой ответ, так как это решение может потенциально помочь многим разработчикам. Решение, которое работало для меня было:

Поместите Viewport мета-тег на странице _Layout.cshtml:

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

Далее в файла JavaScript, положить (они должны быть объединены, но я показываю их по одному для описательных целей):

document.getElementById("viewport").setAttribute("content", "height=600"); 
document.getElementById("viewport").setAttribute("content", "device-width=800"); 

Отрегулируйте параметры по желанию.

Answer 1

Я считаю, что в вашем метатеге отсутствует атрибут width.

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

Чтобы отключить масштабирование (может потребоваться в зависимости от приложения):

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 

В дополнение к этому, как вы настройки вашего размера шрифта? Только установите значение пикселя в теге body, не устанавливая этого, браузер будет использовать устройство по умолчанию, обычно ~ 16 пикселей для рабочего стола.

С установленным базовым весом шрифта используйте EMs для определения размеров других элементов относительно размера шрифта тела. Это позволяет легко менять базовый шрифт для меньших экранов с помощью медиа-запроса. Такие как:

@media (max-width: 400px) { 
    body { 
     font-size: 14px 
    } 
}