Mobile Web Application တစ်ခု ရေးတာပဲ ဖြစ်ဖြစ် Website လုပ်တာပဲဖြစ်ဖြစ် iDevice တွေအတွက်ဆိုရင်တော့ Meta tag တွေကို မဖြစ်မနေသိထားရတယ်။ Mobile Web ဆိုတာက အရင်ကတော့ iPhone, Android လောက်ပဲရှိပေမယ့် ipad ထွက်လာတော့ Web လောက ပြောင်းလဲသွားရပြန်ပါတယ်။ တနည်းပြောရင် iPhone အရွယ်အစားအတွက်လား iPad အတွက်လား ဆိုပြီး သီးသန့်ရေးလာရတာတွေ ရှိတယ်။ ပုံမှန် အားဖြင့် iPad အတွက် သီးသန့် ရေးဆွဲလေ့ မရှိဘူး။ iPad က လက်ရှိ width 960 လောက်ရှိတဲ့ website တွေနဲ့ ဆို အဆင်ပြေပါတယ်။ သူက 1024 X 768 resolution ရှိတယ်။ ဒါကြောင့် website တော်တော်များများနဲ့ အဆင်ပြေပါတယ်။ Website တော်တော်များများကလည်း width 960 လောက်ထားပြီး ရေးကြတော့ 768 ဖြစ်သွားပေမယ့် စာလုံးတွေက သိပ်မသေးသွားဘူးပေါ့။
ကဲ.. ပြောနေတာနဲ့ပဲ လိုရင်း မရောက်တော့ဘူး။
apple-mobile-web-app-capable
သူက Address bar ကို ဖောက်ပေးတာ။ ဘယ်အချိန်မှာ ဖောက်ပေးလည်းဆိုတော့ Add To Home Screen လုပ်ပြီး home screen ကနေ တက်လာတဲ့ အချိန်မှာပေါ့။ ကျွန်တော် Ornagai မှာ သုံးထားသလိုပေါ့ဗျာ။
<meta name=”apple-mobile-web-app-capable” content=”yes”>
apple-mobile-web-app-status-bar-style
အဲဒါကတော့ status bar အရောင်ပြောင်းတာပါ။ iPhone က battery ပြတဲ့နေရာက bar က အရောင်ပြောင်းတာပေါ့။
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”>
viewport
သူကတော့ အရေးကြီးဆုံးပဲဗျ။ iPhone အတွက် တော်တော်အရေးပါတယ်။ ဘာကြောင့် အရေးပါလဲဆိုတာ အောက်မှာ ရှင်းပြပါမယ်။
<meta name = “viewport” content = “width = 320, initial-scale = 1.0, user-scalable = no”>
အဲမှာဆိုရင် ဒီ page ရဲ့ width က 320 လို့ ပြောထားပြီး initial-scale ကို 1 လို့ထားလိုက်တယ်။ user-scalable ကို no ပေးထားတော့ user က resize တွေဘာတွေလုပ်လို့မရတော့ဘူးပေါ့။
initital-scale ဆိုတာကတော့ zoom လို့ပဲ ဆိုရမှာပေါ့။ ပုံမှန်အားဖြင့် resolution နည်းတဲ့ iPhone တို့ iPodTouch တို့မှာ web page ရဲ့ screen width ကြီးတာကြောင့် စာကသေးသေးလေးပဲပေါ်နေမှာပါ။ အဲလို အခါမှာ initial-scale ကို 1 ပေးလိုက်ရင် font အရွယ်အစား အဆင်ပြေတဲ့ အရွယ်ထိ scale ကို ပြန်ညှိချလိုက်မှာပါ။
<meta name = “viewport” content = “width = device-width,initial-scale = 1.0”>
အဲလို ဆိုရင် device width ပေါ်မှာ မူတည်ပြီး ချိန်သွားမှာပေါ့။
<meta name = “viewport” content = “width = device-width,initial-scale = 1.0, maximum-scale=1.0”>
ဆိုရင် user-scable ကို no ပေးထားတာနဲ့ တူသွားပါလိမ့်မယ်။ ဘာလို့လည်းဆိုတော့ maximun-scale နဲ့ initial-scale ကို တူတူပဲထားလိုက်လို့ပါ။ အဲဒီတော့ zoom ဆွဲလို့မရတော့ဘူးပေါ့။
ထပ်ပြီးတော့ သေသေချာချာ သိချင်ရင်တော့
အဲမှာ ဖတ်ကြည့်လို့ရပါတယ်။