תאימות css בעיצוב לאפליקציה
-
המרתי אתר לאפליקציה באמצעות websitetoapk.com.
יש הגדרות css של רספונסיביות (@media screen and (max-width: 840px)
), או הגדרות בוסטרפ שכשהמסך מתקטן התפריט נהיה בהמבורגר) שבאתר עובדות, אבל באפליקציה (כשאני רואה אותה במחשב שלי עם Memu) התצוגה לא מוגדרת לפי הפיקסלים וכפי הגדרות הmedia הנ"ל, אלא זה כאילו מסך מלא והתצוגה רק מתקטנת לפי רוחב המסך.- איך מגדירים את זה עבור האפליקציה?
- יש כלי בMemu בדומה לכלי המפתחים של כרום ע"מ לתכנת את ה- CSS?
תודה.
-
תוסיף את התגית הבאה ל
head
:<meta name="viewport" content="width=device-width, initial-scale=1">
מדוע הViewport אינו מוגדר כך כברירת מחדל?
במהלך הפיתוח של האייפון הראשון, לאפל היה ברור שלמכשיר אין סיכוי להצליח אם יציג דפי אינטרנט בצורה בה העצמים בדף מוצגים באופן מוגדל, על אפל היה להתאים את המכשיר כך שיתאים לצרוך אתרי אינטרנט כפי שהם.
על מנת לפתור את הבעיה אפל השתמשה בטריק המורה לדף האינטרנט להתייחס לרוחב התוכן (ללא קשר לרוחבו האמיתי של המכשיר) כביכול היה בעל 960 פיקסלים - הרוחב הנפוץ ביותר עבור אתרי אינטרנט בעת השקת האייפון הראשון.
המשמעות היא שעל המשתמש היה להגדיל את הדף בעצמו.
הופעת הריספנסיביות אפשרה את איפוסו של המנהג הגרוע הזה, ולשם כך נוצרה תגית המטא Viewport המאפשרת בין השאר את ההגדרה המורה לדפדפן לשוב ולעקוב אחר גודלו הפיזי של המכשיר. -
-