X အခင်းအကျင်းကို အသုံးပြု၍ သူတည်ဆောက်ခဲ့သော WordPress ဆိုဒ်မှအကူအညီတောင်းရန်ကျွန်တော့်သူငယ်ချင်းတစ်ယောက်ကမကြာသေးမီကကျွန်ုပ်နှင့်ဆက်သွယ်ခဲ့သည်။ သူ၏ ၀ က်ဘ်ဆိုက်သည် iPhone တွင်မှန်ကန်စွာဖော်ပြခြင်းမရှိကြောင်းသူသတိပြုမိပြီးနောက်ထို client ကသူ၏ client သည်သူ့ကိုထိုနံနက်တွင်ခေါ်ခဲ့သည်။ နစ်ခ်သည်သူကိုယ်တိုင်စစ်ဆေးခဲ့ပြီးလုံလုံလောက်လောက်သူဒီဇိုင်းလှပသည့်တုန့်ပြန်မှုရှိသောဒီဇိုင်းသည်အလုပ်မလုပ်တော့ပါ။
သူကသူ့ desktop, site ပေါ်တွင်သူ၏ browser window ကိုအရွယ်အစားပြောင်းလိုက်သောအခါသူသည်နောက်ထပ်တွေးမိသည် ဟုတ်တယ် တုန့်ပြန်မှုရှိသော်လည်းသူ၏ iPhone ပေါ်တွင် desktop ဗားရှင်းသာပြသသည်။ အဘယ်ကြောင့် site တစ်ခုဖြစ်လိမ့်မယ် တစ် ဦး desktop ကွန်ပျူတာပေါ်တွင်တုံ့ပြန်မှု နှင့် မိုဘိုင်းထုတ်ကုန်ပေါ်တွင်တုန့်ပြန်မှုမရှိခြင်းလား။
အဘယ်ကြောင့်တုံ့ပြန်မှုဒီဇိုင်းအလုပ်မလုပ်ပါဘူး
တုန့်ပြန်သောဒီဇိုင်းသည် HTML ဖိုင်တစ်ခု၏ခေါင်းစီးတွင်ကုဒ်တစ်ကြောင်းပျောက်နေလျှင်အလုပ်မလုပ်တော့ပါ။ အကယ်၍ ဤကုဒ်နံပါတ်တစ်ခုပျောက်ဆုံးနေပါကသင်၏ iPhone၊ Android နှင့်အခြားမိုဘိုင်းထုတ်ကုန်များကသင်ကြည့်နေသောဝက်ဘ်ဆိုက်သည်အရွယ်အစားကြီးမားသည့်စားပွဲတင်ဆိုက်တစ်ခုဖြစ်သည်ဟုယူဆပြီး၊ ပန်းချီဆရာ မျက်နှာပြင်တစ်ခုလုံးကိုလွှမ်းခြုံရန်။
Viewport နှင့် Viewport အရွယ်အစားအားဖြင့်သင်သည်အဘယ်သို့ဆိုလိုသနည်း
ကိရိယာအားလုံးတွင် viewport အရွယ်အစားသည်လက်ရှိအသုံးပြုသူမြင်နိုင်သောဝက်ဘ်စာမျက်နှာ၏theရိယာ၏အရွယ်အစားကိုရည်ညွှန်းသည်။ သင်သည် iPhone 5 ကိုအကျယ် ၃၂၀ pixels ဖြင့်ကိုင်ထားသည်ဆိုပါစို့။ အတိအလင်းဖော်ပြခြင်းမရှိပါကသင်ကြည့်ရှုသည့် ၀ က်ဘ်ဆိုက်တိုင်းသည်အကျယ် ၉၈၀px အကျယ်ရှိသော desktop ဆိုဒ်ဖြစ်သည်ဟုအိုင်ဖုန်းများကယူဆကြသည်။
အခုဆိုရင်သင့်ရဲ့စိတ်ကူးအိုင် iPhone 5 ကိုသုံးပါ။သင်သည် 800px အကျယ်ရှိသော desktop အတွက်ဒီဇိုင်းပြုလုပ်ထားသော website တစ်ခုသို့လည်ပတ်သည်။ ၎င်းတွင်တုန့်ပြန်မှုမရှိသော layout မရှိပါ။ ထို့ကြောင့်သင့် iPhone သည် full-width desktop version ကိုပြသသည်။
iphone 5s ရှိ touch screen အလုပ်မလုပ်ပါ
ဒါပေမယ့် iPhone 5 က 320x pixels လောက်ပဲရှိတယ်။ ဒါကအမြဲတမ်း viewport ၏အရွယ်အစားသည်မဟုတ်လော
မဟုတ်ပါ။ viewport အရွယ်အစားနှင့်, စကေးပါဝင်ပတ်သက်နိုင်ပါသည် ။ ဝက်ဘ်စာမျက်နှာ၏ကျယ်ပြန့်သောဗားရှင်းကိုကြည့်ရှုရန် iPhone ချဲ့ရန်လိုသည်။ viewport သည်လက်ရှိအသုံးပြုသူမြင်နိုင်သောစာမျက်နှာ၏refersရိယာကိုရည်ညွှန်းသည်ကိုသတိရပါ။ iPhone သုံးစွဲသူသည်လက်ရှိစာမျက်နှာ ၃၂၀ ပစ်ဇယ်ကိုသာကြည့်နေသလားသို့မဟုတ်အကျယ်ဖြန့်သည့်ဗားရှင်းကိုကြည့်နေသလား။
မှန်ကန်သည်။ iPhone သည်ပုံမှန်အတိုင်းပြုမူသည်ဟုယူဆသောကြောင့်သူတို့ပြသထားသောမျက်နှာပြင်ပေါ်တွင်ဝက်ဘ်စာမျက်နှာအပြည့်အစုံကိုတွေ့ရသည်။ အသုံးပြုသူသည်ဝက်ဘ်စာမျက်နှာကို ၉၈၀ ပစ်ဇယ်အထိအထိကြည့်ရှုနိုင်သည်။ ထို့ကြောင့်, iPhone ရဲ့ viewport ကို 980px ဖြစ်ပါတယ်။
သင်ချုံ့ချဲ့ကြည့်သည်နှင့်အမျှ viewport အရွယ်အစားပြောင်းလဲသွားသည်။ ကျွန်ုပ်တို့၏စိတ်ကူးစိတ်သန်းဝက်ဘ်ဆိုက်၌အကျယ် ၈၀၀px ရှိသည်ဟုအရင်ကပြောခဲ့သည်။ ထို့ကြောင့်သင့် iPhone ကိုချဲ့လိုလျှင်ဝက်ဘ်ဆိုက်၏အစွန်းများသည်သင့် iPhone ၏မျက်နှာပြင်၏အစွန်းထိထိရောက်နေလျှင် viewport သည် 800px ဖြစ်သည်။ အိုင်ဖုန်း လုပ်နိုင် Desktop site ပေါ်တွင် 320px ၏ viewport တစ်ခုထားရှိပါ။ သို့သော်ထိုသို့ပြုလုပ်ပါက၎င်းကိုအနည်းငယ်မျှသာမြင်ရပါမည်။
iphone အားမသွင်းရတဲ့အကြောင်းရင်း
ကျွန်ုပ်၏တုံ့ပြန်မှုရှိသော ၀ ဘ်ဆိုဒ်ပျက်နေပါသည် ငါဘယ်လိုပြင်ရမလဲ။
အဖြေမှာဝက်ဘ်စာမျက်နှာတစ်ခု၏ခေါင်းစဉ်တွင်ထည့်သွင်းလိုက်သောအခါ၎င်းကိုကိုယ်ပိုင်အကျယ် (iPhone 5 အတွက် 320px 320xx) ထားရန်နှင့်စာမျက်နှာကိုအရွယ်အစားချဲ့ရန်မဟုတ်သည့်ဝဘ်စာမျက်နှာ၏ခေါင်းစဉ်တွင်ထည့်သွင်းရန်ကိရိယာအားပြောရန်ဖြစ်သည်။
ဒီ meta tag နဲ့သက်ဆိုင်တဲ့ရွေးချယ်မှုအားလုံးရဲ့နည်းပညာပိုင်းဆိုင်ရာဆွေးနွေးမှုတခုခုအတွက်၊ tutsplus.com ပေါ်မှာဤဆောင်းပါး ။
WordPress X အခင်းအကျင်းသည်တုန့်ပြန်မှုမရှိပါကမည်သို့ဖြေရှင်းရမည်နည်း
အရင်သူငယ်ချင်းဆီသို့ပြန်သွားပါ။ သူက X ဆောင်ပုဒ်ကိုအသစ်ပြောင်းတဲ့အခါဒီမျဉ်းကြောင်းတစ်ကြောင်းပျောက်သွားတယ်။ သင့်ကိုပြုပြင်သောအခါ X အခင်းအကျင်းသည်ခေါင်းစီးဖိုင်တစ်လုံးတည်းသာမသုံးကြောင်းသတိပြုပါ - ၎င်းသည် stack တိုင်းအတွက်မတူညီသောခေါင်းစီးဖိုင်များကိုအသုံးပြုသည်၊ ထို့ကြောင့်သင့်ကိုတည်းဖြတ်ရန်လိုအပ်သည်။
ငါ့မျက်နှာပြင်ဘာကြောင့်အဝါရောင်ဖြစ်ရတာလဲ
Nick သည် Ethos stack of X ဆောင်ပုဒ်ကိုအသုံးပြုသောကြောင့်သူသည် x ၌တည်ရှိသောဖိုင်တွဲတွင်ငါအရင်ကဖော်ပြခဲ့သောကုဒ်လိုင်းကိုထည့်ရသည်။ /frameworks/views/ethos/wp-header.php ။ သင်တစ် ဦး ကွဲပြားခြားနား stack ကိုအသုံးပြုသည်ဆိုပါကမှန်ကန်သော header ကိုဖိုင်ကိုရှာဖွေရန် 'အတွေးအခေါ်များ' အတွက်သင့်ရဲ့ stack (Integrity, Renew, etc) ၏အမည်အစားထိုးပါ။ ကြောင်းတလိုင်းနှင့် voila ထည့်ပါ! မင်းသွားချင်တယ်
ဒီတော့ဒါကကျွန်တော့်ရဲ့ CSS Media Query တွေလား၊
သင်၏ HTML ဖိုင်ခေါင်းစဉ်တွင်ထိုမျဉ်းကြောင်းကိုထည့်သွင်းပါကသင်၏တုန့်ပြန်သော @media မေးမြန်းမှုများသည်ရုတ်တရက်ပြန်လည်စတင်ပြီးသင့်ဝက်ဘ်ဆိုက်၏မိုဘိုင်းဗားရှင်းပြန်လည်ရှင်သန်လာလိမ့်မည်။ စာဖတ်ခြင်းအတွက်ကျေးဇူးတင်ပါသည်။
Payette Forward သို့သတိရပါ။
David P.