Bir web tasarımcısı iseniz, olarak bilinen hataViewpoint Ölçeklemesi, Apple cihazlarında (iPod, iPhone ve iPad) meydana gelen yüzleşmenize neden olabilir. Bazen, Apple cihazımızı dikeyden yatay yönde döndürdüğümüzde, site yakınlaştırır ve bize cihaz genişliğinden daha geniş bir görünüme sahip bir görünüm sunar. Bunun nedeni, tasarımcının görünüm alanı genişliğini aygıt genişliğine ayarlamış olmasıdır. Bu hatanın nasıl çalıştığı hakkında bir fikir edinmenize yardımcı olmak için bir örnek sayfa tasarladık ve iPad'inizi dikeyden yatay görünüme döndürdük.
Bahsedilen hata için hızlı bir düzeltme bizeGörüntüleme çerçevesi meta etiketinde ‘maximum-scale = 1’. Bu, şu an için sorunu çözüyor, ancak sayfa artık yakınlaştırılamıyor çünkü aygıt genişliğine benzer maksimum genişliği düzeltiyoruz.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
Bu hızlı düzeltme tam olarak mükemmel bir çözüm değil. @Mathias, @cheeaun ve @jdalton gibi tasarımcıların zor çalışması sayesinde, artık kalıcı bir çözüm elde etmek için <head> bölümüne eklenebilecek bir javascript var. Bu çözüm altında, sayfa yakınlaştırmaya devam edecektir.
<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]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
}(document));
</script>Bunlar tasarımcıların şu ana kadar sunduğu tek bilinen çözümlerdir. Ancak bu hatayı düzeltmek için başka bir tane varsa, yorumlarda bizimle paylaşın.
Yorumlar