တုံ့ပြန်မှုရှိသော ဝဘ်ဒီဇိုင်း - မြင်ကွင်းပို့တ်
Viewport ဆိုတာဘာလဲ။
မြင်ကွင်းပို့တ်သည် ဝဘ်စာမျက်နှာတစ်ခု၏ အသုံးပြုသူမြင်နိုင်သော ဧရိယာဖြစ်သည်။
မြင်ကွင်းပို့တ်သည် စက်နှင့်ကွဲပြားပြီး ကွန်ပြူတာစခရင်ထက် မိုဘိုင်းဖုန်းတွင် သေးငယ်မည်ဖြစ်သည်။
တက်ဘလက်များနှင့် မိုဘိုင်းလ်ဖုန်းများ မတိုင်မီ၊ ဝဘ်စာမျက်နှာများကို ကွန်ပျူတာ ဖန်သားပြင်များအတွက်သာ ဒီဇိုင်းထုတ်ထားပြီး ဝဘ်စာမျက်နှာများတွင် ပုံသေပုံစံနှင့် ပုံသေအရွယ်အစားရှိရန်မှာ သာမာန်ဖြစ်သည်။
ထို့နောက် တက်ဘလက်များနှင့် မိုဘိုင်းလ်ဖုန်းများကို အသုံးပြု၍ အင်တာနက်ကို စတင်အသုံးပြုသောအခါ၊ ပုံသေအရွယ်အစား ဝဘ်စာမျက်နှာများသည် မြင်ကွင်းပို့တ်နှင့် အံဝင်ခွင်ကျမဖြစ်လောက်အောင် ကြီးမားပါသည်။ ၎င်းကိုဖြေရှင်းရန်၊ အဆိုပါကိရိယာများရှိ ဘရောက်ဆာများသည် မျက်နှာပြင်နှင့် အံဝင်ခွင်ကျဖြစ်ရန် ဝဘ်စာမျက်နှာတစ်ခုလုံးကို အရွယ်အစားကို လျှော့ချထားသည်။
ဒါ မပြည့်စုံဘူး!! ဒါပေမယ့် အမြန်ပြင်ပါ။
Viewport ကို သတ်မှတ်ခြင်း။
<meta>
HTML5 သည် တဂ် မှတဆင့် ဝဘ်ဒီဇိုင်နာများ ကြည့်ရှုခွင့်ကို ထိန်းချုပ်ခွင့်ပေးသည့် နည်းလမ်းကို မိတ်ဆက်ပေးခဲ့သည်
။
<meta>
သင့်ဝဘ်စာမျက်နှာများအားလုံးတွင် အောက်ပါ viewport element ကို ထည့်သွင်းသင့်သည် -
<meta name="viewport" content="width=device-width, initial-scale=1.0">
၎င်းသည် စာမျက်နှာ၏အတိုင်းအတာနှင့် အရွယ်အစားကို ထိန်းချုပ်နည်းကို ဘရောက်ဆာအား လမ်းညွှန်ပေးသည်။
စက် width=device-width
၏စခရင်အကျယ်ကိုလိုက်ရန် အပိုင်းသည် စာမျက်နှာ၏အကျယ်ကို သတ်မှတ်ပေးသည် (၎င်းသည် စက်ပေါ် မူတည်၍ ကွဲပြားလိမ့်မည်)။
စာမျက်နှာ initial-scale=1.0
ကို ဘရောက်ဆာမှ ပထမဆုံး တင်သောအခါ အပိုင်းသည် ကနဦးချုံ့ချဲ့မှုအဆင့်ကို သတ်မှတ်ပေးသည်။
ဤသည်မှာ viewport မက်တာတက်ဂ် မပါဘဲ ဝဘ်စာမျက်နှာတစ်ခု၏ ဥပမာတစ်ခု နှင့် viewport မက်တာတက်ဂ်ပါသည့် ဝဘ်စာမျက်နှာ၏ တူညီ သည်-
အကြံပြုချက်- သင်သည် ဤစာမျက်နှာကို ဖုန်း သို့မဟုတ် တက်ဘလက်ဖြင့် ကြည့်ရှုနေပါက၊ ခြားနားချက်ကို ကြည့်ရန် အထက်ဖော်ပြပါ လင့်ခ်နှစ်ခုကို နှိပ်နိုင်ပါသည်။
Viewport သို့ အရွယ်အစား အကြောင်းအရာ
အသုံးပြုသူများသည် ဝဘ်ဆိုဒ်များကို desktop နှင့် mobile devices နှစ်ခုလုံးတွင် ဒေါင်လိုက်ရွှေ့ရန် အသုံးပြုသည် - သို့သော် အလျားလိုက်မဟုတ်ပါ။
ထို့ကြောင့်၊ အကယ်၍ သုံးစွဲသူသည် ဝဘ်စာမျက်နှာတစ်ခုလုံးကို ကြည့်ရှုရန် အလျားလိုက် လှိမ့်ရန် အတင်းအကျပ် တွန်းအားပေးပါက၊ ၎င်းသည် အသုံးပြုသူ အတွေ့အကြုံ ညံ့ဖျင်းမှုကို ဖြစ်ပေါ်စေပါသည်။
လိုက်နာရမည့် နောက်ထပ်စည်းမျဉ်းအချို့
1. ပုံသေ အကျယ်အဝန်း ကြီးမားသော ဒြပ်စင်များကို မသုံးပါနှင့် - ဥပမာအားဖြင့် ပုံတစ်ပုံသည် မြင်ကွင်းပို့တ်ထက် အကျယ်တွင် ပြနေပါက၊ ၎င်းသည် မြင်ကွင်းပို့တ်ကို အလျားလိုက် လှိမ့်စေနိုင်သည်။ viewport ၏ အကျယ်အဝန်းအတွင်း၌ ဤအကြောင်းအရာကို ချိန်ညှိရန် မမေ့ပါနှင့်။
2. အကြောင်းအရာကို ကောင်းမွန်စွာ တင်ဆက်ရန် သီးခြား viewport width ကို အားကိုးမထားပါနှင့် - CSS pixels အတွင်းရှိ မျက်နှာပြင်အတိုင်းအတာနှင့် အကျယ်သည် စက်များကြားတွင် ကျယ်ပြန့်စွာကွဲပြားသောကြောင့်၊ အကြောင်းအရာသည် ကောင်းမွန်စွာတင်ဆက်ရန် သီးခြား viewport width ကို အားမကိုးသင့်ပါ။
3. အသေးစားနှင့် ကြီးမားသော စခရင်များအတွက် မတူညီသောပုံစံပုံစံကိုအသုံးပြုရန် CSS မီဒီယာမေးမြန်းချက်များကို အသုံးပြုပါ - စာမျက်နှာဒြပ်စင်များအတွက် ပကတိ CSS အကျယ်များကို သတ်မှတ်ခြင်းသည် ပိုသေးငယ်သောစက်ရှိ မြင်ကွင်းပို့တ်အတွက် ဒြပ်စင်ကို ကျယ်လွန်းစေသည်။ ယင်းအစား၊ width-100% ကဲ့သို့သော နှိုင်းရအကျယ်တန်ဖိုးများကို အသုံးပြုရန် စဉ်းစားပါ။ ထို့အပြင်၊ ကြီးမားသော absolute positioning တန်ဖိုးများကိုအသုံးပြုရန်သတိထားပါ။ ၎င်းသည် စက်ပစ္စည်းငယ်များရှိ မြင်ကွင်းပို့တ်အပြင်ဘက်သို့ ဒြပ်စင်ကို ပြုတ်ကျစေနိုင်သည်။