Geçenlerde bir arkadaşım X temasını kullanarak oluşturduğu bir WordPress sitesiyle ilgili yardım istemek için benimle iletişime geçti. Müşterisi, web sitesinin iPhone'unda düzgün görünmediğini fark ettikten sonra o sabah onu aramıştı. Nick kendisi kontrol etti ve tasarladığı güzel duyarlı tasarım artık çalışmıyordu.
Masaüstünde tarayıcı penceresini yeniden boyutlandırdığında sitenin duyarlı olmasına karşın iPhone'unda yalnızca masaüstü sürümünün görüntülenmesi onu daha da şaşırttı. Bir site neden bir masaüstü bilgisayarda yanıt verirken bir mobil cihazda yanıt vermiyor?
Duyarlı Tasarım Neden Çalışmıyor
Uyumlu tasarım, bir HTML dosyasının başlığında bir kod satırı eksik olduğunda çalışmayı durdurur. Bu tek kod satırı eksikse, iPhone, Android ve diğer mobil cihazlarınız, görüntülemekte olduğunuz web sitesinin tam boyutlu bir masaüstü sitesi olduğunu varsayacak ve viewport boyutunu ayarlayacaktır.tüm ekranı kapsayacak şekilde.
Görüntü Alanı ve Görüntü Alanı Boyutu Deyince Ne Demek İstiyorsunuz?
Tüm cihazlarda, görünümün boyutu, bir web sayfasının o anda kullanıcı tarafından görülebilen alanının boyutunu ifade eder. 320 piksel genişliğe sahip bir iPhone 5 tuttuğunuzu hayal edin. Aksi açıkça belirtilmedikçe, iPhone'lar ziyaret ettiğiniz her web sitesini 980px genişliğinde bir masaüstü sitesi olarak kabul eder.
Şimdi hayali iPhone 5'inizi kullanarak masaüstü için tasarlanmış 800 piksel genişliğinde bir web sitesini ziyaret ediyorsunuz. Duyarlı bir düzeni olmadığı için iPhone'unuz tam genişlikte masaüstü sürümünü görüntüler.
Hayır değil. Görünüm alanı boyutu ile ölçeklendirme söz konusu olabilir. Web sayfasının tam genişlikte sürümünü görmek için iPhone'un uzaklaştırması gerekir. Görüntü alanının, bir sayfanın o anda kullanıcı tarafından görülebilen alanını ifade ettiğini unutmayın. iPhone kullanıcısı şu anda sayfanın yalnızca 320 pikselini mi görüyor, yoksa tam genişlikli sürümü mü görüyor?
Doğru: Ekranlarında tam genişlikte web sayfasını görüyorlar çünkü iPhone varsayılan davranış olarak kabul etti: Kullanıcı, 980 piksel genişliğe kadar bir web sayfasını görüntüleyebilmesi için uzaklaştırıldı. Bu nedenle, iPhone'un görüntü alanı 980 pikseldir.
Yakınlaştırdıkça veya uzaklaştırdıkça görüntü alanı boyutu değişir. Daha önce hayali web sitemizin 800px genişliğe sahip olduğunu söylemiştik, yani iPhone'unuzu web sitesinin kenarları iPhone'unuzun ekranının kenarlarına değecek şekilde yakınlaştırırsanız, görüntü alanı 800px olur. iPhone, bir masaüstü sitesinde 320 piksellik bir görünüme sahip olabilir, ancak olsaydı, bunun yalnızca küçük bir bölümünü görüyor olurdunuz.
Duyarlı Web Sitem Bozuk. Nasıl Düzeltebilirim?
Yanıt, bir web sayfasının başlığına eklendiğinde cihaza görünümü ölçeklendirmeden kendi genişliğine (iPhone 5 olması durumunda 320 piksel) ayarlamasını söyleyen tek bir HTML satırıdır. (veya yakınlaştırın) sayfayı.
Bu meta etiketle ilgili tüm seçeneklerle ilgili daha teknik bir tartışma için tutsplus.com'daki bu makaleye göz atın.
WordPress X Teması Duyarlı Olmadığında Nasıl Düzeltilir
Önceki arkadaşıma dön: X temasını güncellediğinde bu tek satırlık kod kayboldu. Sizinkini düzeltirken, X temasının yalnızca bir başlık dosyası kullanmadığını unutmayın; her yığın için farklı başlık dosyaları kullanır, bu nedenle sizinkini düzenlemeniz gerekir.
Nick, Ethos stack of X temasını kullandığından, daha önce bahsettiğim kod satırını x /frameworks/views/ethos/wp-header.conf klasöründe bulunan başlık dosyasına eklemek zorunda kaldı.php . Farklı bir yığın kullanıyorsanız, doğru başlık dosyasını bulmak için yığınınızın adını (Dürüstlük, Yenileme vb.) "ethos" yerine değiştirin. Bu bir satırı ekleyin ve işte! Hazırsınız.
Yani Bu Benim CSS Medya Sorgularımı da Düzeltiyor?
HTML dosyanızın başlığına bu satırı eklediğinizde, yanıt veren @media sorgularınız aniden yeniden çalışmaya başlayacak ve web sitenizin mobil versiyonu yeniden hayata dönecektir. Okuduğunuz için teşekkürler ve umarım yardımcı olur!
Payette Forward'ı Hatırla, David P.
