HTML မှ မြင်ကွင်းပို့တ်ကို စမတ်ဖုန်းအရွယ်အစားသို့ ပြောင်းလဲခြင်းနှင့် ပတ်သက်သည့် အဓိကပြဿနာမှာ ဝဘ်ဆိုဒ်ကို တုံ့ပြန်မှုမဲ့သွားခြင်း သို့မဟုတ် မမှန်မကန်ပြသခြင်းတို့ကို ဖြစ်စေနိုင်သည်။ အဘယ်ကြောင့်ဆိုသော် မြင်ကွင်းပို့တ်ကို ပြောင်းလဲလိုက်သောအခါ၊ ဝဘ်ဆိုက်သည် ပိုသေးငယ်သော မျက်နှာပြင်အရွယ်အစားအတွက် အကောင်းဆုံးဖြစ်နိုင်မည်မဟုတ်သည့်အပြင် ၎င်း၏အကြောင်းအရာကို ကောင်းစွာစကေးချနိုင်ခြင်းမရှိသောကြောင့်ဖြစ်သည်။ ထို့အပြင်၊ အချို့သောအင်္ဂါရပ်များသည် လမ်းကြောင်းပြမီနူးများ သို့မဟုတ် အပြန်အလှန်အကျိုးပြုသောဒြပ်စင်များကဲ့သို့သော သေးငယ်သောမျက်နှာပြင်အရွယ်အစားတွင် မှန်ကန်စွာအလုပ်လုပ်မည်မဟုတ်ပါ။
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. ဤကုဒ်မျဉ်းသည် ဘရောက်ဆာသို့ HTML စာရွက်စာတမ်းနှင့်ပတ်သက်သည့် အချက်အလက်ကို ပေးဆောင်သည့် မက်တာတက်ဂ်တစ်ခုဖြစ်သည်။
2. အမည် attribute ကို "viewport" ဟုသတ်မှတ်ထားပြီး၊ ဤတဂ်တွင် စာမျက်နှာကို မတူညီသောစက်ပစ္စည်းများတွင် မည်သို့ပြသသင့်သည်နှင့်ပတ်သက်သည့် အချက်အလက်ပါရှိကြောင်း ဘရောက်ဆာအားပြောပြသည်။
3. အကြောင်းအရာ attribute ကို “width=device-width, initial-scale=1.0” ဟု သတ်မှတ်ထားပြီး ၎င်းသည် စာမျက်နှာ၏ အကျယ်ကို အသုံးပြုသင့်ပြီး လိုအပ်ပါက ၎င်းမှ ၎င်းကို အပေါ် သို့မဟုတ် အောက်သို့ အတိုင်းအတာအဖြစ် စက်၏အကျယ်ကို အသုံးပြုသင့်ကြောင်း ဘရောက်ဆာအား ပြောပြသည်။
မာတိကာ
တုံ့ပြန်မှုက်ဘ်ဒီဇိုင်း
တုံ့ပြန်မှုရှိသော ဝဘ်ဒီဇိုင်းသည် ဝဘ်စာမျက်နှာများကို စက်အမျိုးမျိုးနှင့် ဝင်းဒိုး သို့မဟုတ် စခရင်အရွယ်အစားပေါ်တွင် ကောင်းမွန်စွာပြန်ဆိုစေသည့် ဝဘ်ဒီဇိုင်းအတွက် ချဉ်းကပ်မှုတစ်ခုဖြစ်သည်။ ၎င်းသည် ပြောင်းလွယ်ပြင်လွယ်ရှိသော ဂရစ်ဒ်များနှင့် အပြင်အဆင်များ၊ ရုပ်ပုံများနှင့် CSS မီဒီယာမေးမြန်းချက်များ၏ ဉာဏ်ရည်ထက်မြက်သောအသုံးပြုမှုကို အသုံးပြုသည်။ Responsive ဝဘ်ဆိုက်များသည် စက်ပစ္စည်းအများအပြား (ဒက်စတော့ကွန်ပြူတာမော်နီတာများမှ မိုဘိုင်းလ်ဖုန်းများအထိ) အရွယ်အစားပြောင်းလဲခြင်း၊ ရွှေ့ခြင်းနှင့် လှိမ့်ခြင်းတို့ကို အနည်းဆုံး အရွယ်အစားပြောင်းလဲခြင်း၊ လှည့်ခြင်းနှင့် လှိမ့်ခြင်းတို့ဖြင့် အကောင်းဆုံးကြည့်ရှုခြင်းအတွေ့အကြုံကို ပေးစွမ်းရန် ဒီဇိုင်းထုတ်ထားသည်။
HTML တွင် အောက်ပါနည်းပညာများကို အသုံးပြုခြင်းဖြင့် တုံ့ပြန်မှုဒီဇိုင်းကို ရရှိနိုင်သည်-
• ပြောင်းလွယ်ပြင်လွယ် ဂရစ်ဒ်များ – ရာခိုင်နှုန်းများ သို့မဟုတ် ems ကဲ့သို့သော ဆက်စပ်ယူနစ်များဖြစ်သည့် ကွက်ကွက်ဒြပ်စင်များအတွက် pixels ကဲ့သို့သော ပုံသေအနံယူနစ်များအစား ရာခိုင်နှုန်းများ သို့မဟုတ် ems ကဲ့သို့သော ဆက်စပ်ယူနစ်များကို အသုံးပြုခြင်းသည် စာမျက်နှာအား မတူညီသောစခရင်အရွယ်အစားများသို့ လိုက်လျောညီထွေဖြစ်အောင် လုပ်ဆောင်နိုင်စေပါသည်။
• မီဒီယာမေးမြန်းချက်များ – CSS3 မီဒီယာမေးမြန်းချက်များသည် မတူညီသောစက်ပစ္စည်းအကျယ်များအတွက် မတူညီသောစတိုင်များကို developer များအား သတ်မှတ်ခွင့်ပြုသည်။ ၎င်းသည် အသုံးပြုနေသည့်စက်ပစ္စည်းပေါ် မူတည်၍ စာမျက်နှာအပြင်အဆင်ကို လျော်ညီစွာ ချိန်ညှိနိုင်စေပါသည်။
• တုံ့ပြန်မှုပုံများ – HTML5 ရှိ srcset ရည်ညွှန်းချက်အား အသုံးပြုခြင်းဖြင့် ရုပ်ပုံများကို တုံ့ပြန်မှုပြုလုပ်နိုင်သည်
• ပြောင်းလွယ်ပြင်လွယ်ရှိသော ဗီဒီယိုများ – CSS ရှိ အရာဝတ္ထုနှင့် ကိုက်ညီသည့် ပိုင်ဆိုင်မှုကို အသုံးပြုခြင်းဖြင့် ဗီဒီယိုများသည် ၎င်းတို့၏ ကွန်တိန်နာအတွင်း ၎င်းတို့၏ အရွယ်အစားပေါ် မူတည်၍ ဗီဒီယိုများကို ၎င်းတို့၏ ကွန်တိန်နာအတွင်း မည်ကဲ့သို့ စကေးချရမည်ကို ဆော့ဖ်ဝဲအင်ဂျင်နီယာများက သတ်မှတ်ခွင့်ပြုသည်။
Viewport မက်တာတက်ဂ်
viewport မက်တာတက်ဂ်သည် အသုံးပြုနေသည့် စက်ပစ္စည်းနှင့် လိုက်လျောညီထွေဖြစ်စေရန်အတွက် စာမျက်နှာ၏အတိုင်းအတာနှင့် အရွယ်အစားကို မည်သို့ချိန်ညှိရမည်နည်း။ စမတ်ဖုန်းနှင့် တက်ဘလက်များကဲ့သို့ မတူညီသော စက်ပစ္စည်းများတွင် ဝဘ်စာမျက်နှာကို ကြည့်ရှုပုံအား ထိန်းချုပ်ရန် ၎င်းကို အသုံးပြုသည်။ viewport မက်တာတက်ဂ်ကို ဝဘ်စာမျက်နှာတစ်ခု၏ အကျယ်ကို သတ်မှတ်ရန်၊ ၎င်းကို အပေါ်သို့ သို့မဟုတ် အောက်သို့ အတိုင်းအတာနှင့် ချဲ့ရန်နှင့် အသုံးပြုသူများကို ချုံ့ချဲ့ရန် သို့မဟုတ် ထွက်ရန် ခွင့်ပြုသည်ဖြစ်စေ မသတ်မှတ်ရန် အသုံးပြုနိုင်သည်။ ကနဦးစကေး၊ အမြင့်ဆုံးအတိုင်းအတာ၊ အသုံးပြုသူ-စကေးနိုင်သော ဂုဏ်သတ္တိများနှင့် အခြားအရာများကို သတ်မှတ်ရန်အတွက်လည်း ၎င်းကို အသုံးပြုနိုင်သည်။
ကျွန်ုပ်၏ ဝဘ်ဆိုဒ်ကို ကျွန်ုပ်၏ ဖုန်းစခရင်နှင့် အံဝင်ခွင်ကျဖြစ်အောင် မည်သို့ပြုလုပ်ရမည်နည်း။
ဝဘ်ဆိုက်တစ်ခုအား HTML ဖြင့် ဖုန်းစခရင်နှင့် အံဝင်ခွင်ကျဖြစ်စေရန်၊ viewport meta tag ကို အသုံးပြုနိုင်သည်။ ဤတက်ဂ်သည် သင့်အား မတူညီသော စက်များတွင် သင့်ဝဘ်ဆိုဒ်ကို ပြသပုံကို ထိန်းချုပ်နိုင်စေပါသည်။ မြင်ကွင်းပို့တ်၏ အကျယ်ကို စက်ပစ္စည်း၏ အကျယ်နှင့် ညီစေရန် သင်သတ်မှတ်နိုင်သည်၊ သို့မှသာ သင့်ဝဘ်ဆိုဒ်သည် မည်သည့်စက်ပစ္စည်း၏စခရင်နှင့်မဆို ကိုက်ညီစေရန် ၎င်း၏အရွယ်အစားကို အလိုအလျောက်ချိန်ညှိမည်ဖြစ်သည်။ ထို့အပြင်၊ သင်သည် မတူညီသော စက်ပစ္စည်းများတွင် သင့်ဝဘ်ဆိုဒ်ကို မည်သို့မြင်ရသည်ကို ပိုမိုစိတ်ကြိုက်ပြင်ဆင်ရန် သင်၏ CSS ကုဒ်ရှိ မီဒီယာမေးမြန်းချက်များကိုလည်း အသုံးပြုနိုင်ပါသည်။
