Саяхан нэг найз маань надтай холбоо барьж, X сэдвийг ашиглан өөрийн бүтээсэн WordPress сайтын талаар тусламж хүсчээ. Вэбсайт нь iPhone дээр зөв харагдахгүй байгааг анзаарсны дараа үйлчлүүлэгч нь тэр өглөө түүн рүү залгасан байв. Ник өөрөө үүнийг шалгаж үзсэн бөгөөд түүний зохион бүтээсэн гайхалтай мэдрэмжтэй дизайн цаашид ажиллахгүй болсон.
Тэрбээр вэбсайтынхаа ширээний цонхны хэмжээг өөрчилж байхдаа сайтаа өөрчилсөн нь түүнийг улам их нууцалжээ байсан мэдрэмжтэй, гэхдээ түүний iPhone дээр зөвхөн ширээний хувилбарыг л харуулсан болно. Яагаад сайт байх ёстой вэ? суурин компьютер дээр хариу үйлдэл үзүүлэх боломжтой болон хөдөлгөөнт төхөөрөмж дээр хариу өгөхгүй байна уу?
Хариуцлагатай дизайн яагаад ажиллахгүй байна вэ?
HTML файлын толгой дээр нэг мөр код байхгүй үед хариу үйлдэл үзүүлэх загвар нь ажиллахаа болино. Хэрэв энэ ганц мөр код байхгүй бол таны iPhone, Android болон бусад хөдөлгөөнт төхөөрөмжүүд таны үзэж буй вэбсайт нь бүрэн хэмжээний ширээний сайт байна гэж үзэж, харах цонх дэлгэцийг бүхэлд нь багтаах.
Viewport and viewport size гэж юу гэсэн үг вэ?
Бүх төхөөрөмж дээр харах цонхны хэмжээ нь тухайн хэрэглэгчийн харж болох вэб хуудасны талбайн хэмжээг илэрхийлнэ. Та 320 пикселийн өргөнтэй iPhone 5 гартаа барьж байна гээд төсөөлөөд үз дээ. Хэрэв өөрөөр тодорхой заагаагүй бол iPhone таны зочилсон вэбсайт бүрийг 980px өргөнтэй ширээний сайт гэж үздэг.
Одоо төсөөлөн бодсон iPhone 5-гоо ашигланТа ширээний компьютерт зориулж 800px өргөнтэй вэбсайтад зочилно уу. Энэ нь хариу үйлдэл үзүүлэх байршилгүй тул таны iPhone бүхэл бүтэн ширээний хувилбарыг харуулдаг.
iphone унтрахгүй байна
Гэхдээ iPhone 5 нь ердөө 320 пикселийн өргөнтэй. Энэ нь үргэлж харах цонхны хэмжээ биш гэж үү?
Үгүй тийм биш. Харах цонхны хэмжээтэй, өргөжүүлэх ажилд оролцож болно . IPhone нь вэб хуудасны бүрэн өргөн хувилбарыг харахын тулд томруулах ёстой. Viewport нь тухайн хэрэглэгчийн харж болох хуудасны хэсгийг хэлнэ гэдгийг санаарай. IPhone хэрэглэгч одоогоор хуудасны ердөө 320 пикселийг харж байна уу эсвэл бүрэн өргөн хувилбарыг нь харж байна уу?
Энэ нь зөв юм: iPhone нь анхдагч үйлдэл гэж үзсэн тул тэд дэлгэцэн дээрээ бүрэн хэмжээний вэб хуудсыг харж байна: Хэрэглэгчийн вэб хуудсыг 980 пикселийн өргөн хүртэл үзэх боломжтой тул хэмжээг нь жижигрүүлсэн. Тиймээс iPhone-ийн харах цонх 980px байна.
Томруулж эсвэл томруулах тусам харах цонхны хэмжээ өөрчлөгдөнө. Бидний төсөөллийн вэбсайт 800px-ийн өргөнтэй тул хэрэв та iPhone-оо томруулж вэбсайтын ирмэгүүд таны iPhone-ийн дэлгэцийн ирмэгүүдэд хүрвэл, харах цонх нь 800px байх болно гэж бид өмнө нь хэлсэн. IPhone чадах ширээний сайт дээр 320px хэмжээтэй харах цонхтой байх ёстой, гэхдээ хэрэв тийм бол та түүний багахан хэсгийг л харах байсан.
iphone 6s шинэчлэлтийг шалгаж байгаад гацсан байна
Миний хариу үйлдэл хийдэг вэбсайт эвдэрсэн. Би үүнийг хэрхэн засах вэ?
Хариулт нь вэб хуудасны толгой хэсэгт оруулахад төхөөрөмжийг харах цонхыг өөрийн өргөн (iPhone 5-ийн хувьд 320px) болгож тохируулахыг зөвлөж байгаа бөгөөд хуудсыг томруулахгүй (эсвэл томруулахгүй).
Энэ мета шошготой холбоотой бүх сонголтуудын талаар илүү техникийн хэлэлцүүлгийг үзнэ үү tutsplus.com дээрх энэ нийтлэл .
WordPress X Theme-ийг хариу өгөхгүй байх үед хэрхэн засах вэ
Өмнөх найз руугаа буцах: X сэдэвийг шинэчлэхэд энэ нэг мөр код алга болсон. Өөрийнхөө файлыг засахдаа X сэдэв нь зөвхөн нэг толгой файл ашигладаггүй гэдгийг санаарай.Энэ нь стек болгонд өөр өөр файлын файл ашигладаг тул та өөрийн файлыг засах хэрэгтэй болно.
Би апп дэлгүүртэйгээ холбогдож чадахгүй байна
Ник нь X сэдвийн Ethos стекийг ашигладаг тул өмнө нь дурдсан кодын мөрийг x дотор байрлах толгой файлд нэмж оруулах шаардлагатай болсон. /frameworks/views/ethos/wp-header.php . Хэрэв та өөр стек ашиглаж байгаа бол зөв толгой файлыг олохын тулд стекийнхээ нэрийг (Integrity, Renew гэх мэт) ‘ethos’ гэж орлоорой. Энэ нэг мөрийг оруулаад voila! Та явахад сайн байна.
Тэгэхээр энэ нь миний CSS медиа асуултуудыг бас засаж байна уу?
Энэ мөрийг HTML файлынхаа толгой хэсэгт оруулахад таны хариу үйлдэл хийдэг @ медиа асуултууд гэнэт дахин ажиллаж эхлэх бөгөөд таны вэбсайтын мобайл хувилбар дахин сэргэх болно. Уншсанд баярлалаа, тусална гэж найдаж байна!
Payette Forward гэдгийг санаарай,
Дэвид П.