Масштабирование и увеличение масштаба экрана Viewport: на какие браузеры повлияли?

Кажется, что рабочий стол IE10 неправильно масштабирует текст, размер шрифта которого установлен в единицах просмотра, когда уровень масштабирования не установлен на 100%. Я пытаюсь выяснить, какие версии IE (и, возможно, другие браузеры) затронуты этим. Пожалуйста, попробуйте этот пример в браузере и сообщить свои выводы:Масштабирование и увеличение масштаба экрана Viewport: на какие браузеры повлияли?

<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1"> 
<META NAME="viewport" CONTENT="width=device-width, initial-scale=1.0"> 
<STYLE TYPE="text/css"> 
DIV:first-of-type {width: 32px; height: 32px; background-color: blue;} 
DIV:last-of-type {width: 3.125vw; height: 3.12vw; background-color: red;} 
P:first-of-type {font-size: 32px;} 
P {font-size: 3.125vw;} 
P:last-of-type {font-size: 16px;} 
@-webkit-viewport {width: device-width; zoom: 1.0;} 
@-moz-viewport {width: device-width; zoom: 1.0;} 
@-ms-viewport  {width: device-width; zoom: 1.0;} 
@-o-viewport  {width: device-width; zoom: 1.0;} 
@viewport   {width: device-width; zoom: 1.0;} 
</STYLE> 
</HEAD> 
<BODY> 
<DIV></DIV> 
<P>font-size: 32px</P> 
<DIV></DIV> 
<P>font-size: 3.12vw</P> 
<P>Resize the window to see the expected behaviour.<BR> 
    Zoom in/out to see IE's erratic behaviour:<BR> 
    the DIV adapts to the new viewport width,<BR> 
    but the font size doesn't.</P> 
</BODY> 
</HTML>

источник

2015-05-16 m69

Linked: http://stackoverflow.com/questions/30181112/are-viewport-units-vw-vh-vmin-vmax-not-zoom-friendly/30289242#30289242 – cnst

Из моего собственного тестирования: Хром 28 понимает vw для размеров DIV, но не для размеров шрифтов. Chrome 43 показывает ожидаемое поведение. IE8 вообще не выдерживает vw. IE10 неправильно масштабирует шрифты размера vw при увеличении/удалении. – m69

Эта ошибка, похоже, исправлена в IE11. – m69

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

<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1"> 
<META NAME="viewport" CONTENT="width=device-width, initial-scale=1.0"> 
<STYLE TYPE="text/css"> 
BODY {font-size: 16px;} 
DIV:first-of-type {width: 32px; height: 32px; background-color: blue;} 
DIV:last-of-type {width: 3.12vw; height: 3.12vw; background-color: red;} 
P:first-of-type {font-size: 32px;} 
P:last-of-type {font-size: 200%;} 
@-webkit-viewport {width: device-width; zoom: 1.0;} 
@-moz-viewport {width: device-width; zoom: 1.0;} 
@-ms-viewport  {width: device-width; zoom: 1.0;} 
@-o-viewport  {width: device-width; zoom: 1.0;} 
@viewport   {width: device-width; zoom: 1.0;} 
</STYLE> 
<SCRIPT> 
function addEvent(el, ev, eh, el2, ev2, eh2) 
{ 
    if (el.addEventListener) 
    { 
     el.addEventListener(ev, eh, false); 
    } 
    else if ((el2 || el).attachEvent) 
    { 
     (el2 || el).attachEvent("on" + (ev2 || ev), eh2 || eh); 
    } 
} 
function fontSizeFix() 
{ 
    /* if (navigator.userAgent.search(/\bMSIE\s(9\.|10\.).*\bWindows\s(?!(CE|Phone))/i) > -1) */ 
    { 
     if (document.body) 
     { 
      addEvent(window, "resize", textSize); 
      textSize(); 
     } 
     else 
     { 
      addEvent(document, "DOMContentLoaded", fontSizeFix, window, "load"); 
     } 
    } 
    function textSize() 
    { 
     var w = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth; 
     document.body.style.fontSize = 1.6 * w/100 + "px"; 
    } 
} 
fontSizeFix(); 
</SCRIPT> 
</HEAD> 
<BODY> 
<DIV></DIV> 
<P>font-size: 32px</P> 
<DIV></DIV> 
<P>font-size: 200%</P> 
</BODY> 
</HTML>

источник

2015-06-09 02:46:09 m69

Масштабирование и увеличение масштаба экрана Viewport: на какие браузеры повлияли?

ответ

Смежные вопросы