אם אתה מעצב אתרים, הבאג המכונהקנה מידה של נקודת מבט עשוי היה להתעמת איתך המתרחש במכשירי Apple, למשל iPod, iPhone ו- iPad. לפעמים, כשאנחנו מסובבים את מכשיר ה- Apple שלנו מנקודת דיוקן לכיוון נוף, האתר מתקרב פנימה ומציג לנו נוף עם רוחב גדול יותר מרוחב המכשיר. הסיבה לכך היא שהמעצב קבע את רוחב התצוגה לרוחב המכשיר. כדי לעזור לך לקבל מושג כיצד באג זה עובד, עיצבנו דף לדוגמה וסיבבנו את ה- iPad שלנו מתצוגה לרוחב.
תיקון מהיר לבאגים האמורים מנחה אותנו להגדיר את ה-'קנה מידה מקסימלי = 1' במטא תג התצוגה. זה אכן פותר את הבעיה בינתיים, אך הדף כבר אינו מסוגל להגדיל את התצוגה מכיוון שאנו מתקנים את הרוחב המרבי הדומה לרוחב המכשיר.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
התיקון המהיר הזה אינו בדיוק הפיתרון המושלם. באמצעות עבודתם הקשה של מעצבים כמו @mathias, @cheeaun ו- @jdalton, יש לנו כעת ג'אווה סקריפט שניתן להוסיף לקטע <head> על מנת לקבל פיתרון קבוע. תחת פיתרון זה הדף יישאר מסוגל להתקרב.
<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>אלה הפתרונות הידועים היחידים שעיצבו המעצבים עד כה. אבל אם יש לך עוד אחד לתקן את הבאג הזה, אל שתף אותו איתנו בתגובות.
הערות