Bir dostum bu yaxınlarda X temasını istifadə edərək qurduğu bir WordPress saytında kömək istəmək üçün mənimlə əlaqə saxladı. Müştərisi veb saytının iPhone-da düzgün göstərilmədiyini görəndən sonra həmin gün müştərisi ona zəng etmişdi. Nick bunu özü yoxladı və şübhəsiz ki, dizayn etdiyi gözəl həssas dizayn artıq işləmir.
Onu masaüstündə brauzer pəncərəsini ölçüsünü dəyişdirdikdə, sayt saytı daha da təsirləndirdi idi həssas, lakin iPhone-da yalnız masa üstü versiyası göstərildi. Niyə bir sayt ola bilər masa üstü kompüterdə həssasdır və mobil cihazda cavab vermir?
Niyə həssas dizayn işləmir?
Bir HTML sətrinin başlığında bir kod səsi olmadıqda, həssas dizayn işləməyi dayandırır. Bu tək kod səsi yoxdursa, iPhone, Android və digər mobil cihazlarınız baxdığınız veb saytın tam ölçülü bir masa üstü saytı olduğunu qəbul edəcək və baxış bütün ekranı əhatə etmək.
Viewport və Viewport ölçüsü dedikdə nəyi nəzərdə tutursunuz?
Bütün cihazlarda baxış pəncərəsinin ölçüsü istifadəçi tərəfindən hazırda görünən bir veb səhifənin sahəsinin ölçüsünə aiddir. Təsəvvür edin ki, eni 320 piksel olan bir iPhone 5 əlinizdədir. Başqa bir şəkildə başqa bir şəkildə izah edilmədikdə, iPhone'lar, ziyarət etdiyiniz hər veb saytın eni 980px olan bir masa üstü sayt olduğunu düşünürlər.
İndi xəyali iPhone 5-dən istifadə edərək,800px enində masa üstü üçün hazırlanmış bir veb səhifəni ziyarət edirsiniz. Duyarlı bir tərtibə sahib olmadığı üçün iPhone'unuz tam geniş masa üstü versiyasını göstərir.
ipad air 2 alma loqosuna yapışdı
Ancaq iPhone 5-in eni yalnız 320 pikseldir. Həmişə görünüşün ölçüsü deyilmi?
Xeyr, yox. Görünüş ölçüsü ilə, miqyaslandırma iştirak edə bilər . IPhone veb saytının tam genişliyini görmək üçün kiçikləşdirməlidir. Unutmayın ki, baxış pəncərəsi istifadəçinin hazırda görünə biləcəyi bir səhifəyə aiddir. IPhone istifadəçisi hal-hazırda səhifənin yalnız 320 pikselini görür, yoxsa tam geniş versiyasını görür?
Düzdü: iPhone-un standart davranış olduğunu düşündüyü üçün ekranda tam genişlikli veb səhifələr görürlər: İstifadəçi 980 piksel genişliyə qədər veb səhifəyə baxa bilməsi üçün uzaqlaşdırılıb. Buna görə iPhone-un baxış yeri 980 pikseldir.
Kiçiltdikdə və ya kiçildikdə görünüş pəncərəsinin ölçüsü dəyişir. Daha əvvəl xəyali veb saytımızın 800 piksel genişliyinə sahib olduğunu söylədik, buna görə veb saytınızın kənarları iPhone ekranınızın kənarlarına toxunacaq şəkildə iPhone-u yaxınlaşdırsaydınız, baxış pəncərəsi 800 piksel olacaqdır. İPhone bacarmaq bir masa üstü saytında 320 piksellik bir görünüş var, amma görsəydi, bunun yalnız kiçik bir hissəsini görərdiniz.
iphone ekranı qara və ağdır
Cavab verən veb saytım qırılıb. Bunu necə düzəldə bilərəm?
Cavab, bir veb səhifənin başlığına daxil edildikdə cihaza görüntü genişliyini öz genişliyinə (iPhone 5 vəziyyətində 320 piksel) qoymağı və səhifəni ölçməməyi (və ya böyütməməyi) tələb edən tək bir HTML sətridir.
Bu meta etiketi ilə əlaqəli bütün seçimlərin daha texniki müzakirəsi üçün yoxlayın tutsplus.com saytındakı bu məqalə .
Həssas olmadığı zaman WordPress X Temasını necə düzəltmək olar
Əvvəlki dostuma qayıt: X mövzusunu yenilədikdə bu bir kod xətti yox oldu. Özünüzü düzəldən zaman unutmayın ki, X mövzusu yalnız bir başlıq faylı istifadə etmir - hər yığın üçün fərqli başlıq sənədlərindən istifadə edir, buna görə özünüzün redaktə etməlisiniz.
iphone öz -özünə açılır və sönür
Nick, X mövzusunun Ethos yığını istifadə etdiyindən, əvvəllər qeyd etdiyim kod xəttini x-də yerləşən başlıq sənədinə əlavə etməli oldu. /frameworks/views/ethos/wp-header.php . Fərqli bir yığın istifadə edirsinizsə, düzgün başlıq sənədini tapmaq üçün yığın adınızı (Bütünlük, Yeniləmə və s.) ‘Ethos’ ilə əvəz edin. Bir sətri əlavə edin və voila! Getmək yaxşıdır.
Beləliklə, bu da CSS Media Sorğularımı düzəldir?
Bu sətri HTML dosyanızın başlığına daxil etdiyiniz zaman, cavab verən @ mediya sorğularınız birdən-birə yenidən işə başlayacaq və veb saytınızın mobil versiyası yenidən dirçələcəkdir. Oxuduğunuz üçün təşəkkür edirəm və kömək edəcəyini ümid edirəm!
Payette Forward'ı unutma,
David P.