Поправите Аппле-ов уређај Сафари Виевпорт Сцалинг Буг [Како да]

Ако сте веб дизајнер, грешка позната каоСкалирање са тачке гледишта можда вас је суочило с догађајима на Аппле уређајима, тј. ИПоду, иПхонеу и иПаду. Понекад, када ротирамо свој Аппле уређај од портретне до пејзажне оријентације, веб локација увећава приказујући нам приказ који има ширину већу од ширине уређаја. То је зато што је дизајнер поставио ширину видног прозора на ширину уређаја. Да бисмо вам помогли да сазнате како ова грешка ради, дизајнирали смо огледну страницу и ротирали наш иПад од портрета до пејзажног приказа.

Брзо решење за поменуту буг води нас ка постављању„Максимална скала = 1“ у мета ознаци приказа. Ово за сада решава проблем, али страница се више не може зумирати јер фиксирамо максималну ширину сличну ширини уређаја.

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

Ово брзо решење није баш савршено решење. Кроз напоран рад дизајнера попут @матхиас, @цхееаун и @јдалтон, сада имамо јавасцрипт који се може додати у одељак <хеад> како бисмо добили трајно решење. У оквиру овог решења, страница ће и даље моћи да се зумира.

<script type="text/javascript">
(function(doc) {
var addEvent = "addEventListener",
type = "gesturestart",
qsa = "querySelectorAll",
scales = [1, 1],
meta = qsa in doc ? doc[qsa]("meta[name=viewport]") : [];
function fix() {
meta.content = "width=device-width,minimum-scale=" + scales[0] + ",maximum-scale=" + scales[1];
doc.removeEventListener(type, fix, true);
}
if ((meta = meta[meta.length - 1]) &amp;&amp; addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
}(document));
</script>

Ово су једина позната решења која су дизајнери досад смислили. Али ако имате још једну која ће исправити ову грешку, поделите је са нама у коментарима.