Duyarlı Web Sitem Çalışmıyor. Düzeltme: Görüntü Alanı.

My Responsive Website Isn T Working







Sorunları Ortadan Kaldırmak Için Enstrümanımızı Deneyin

erkekler için en iyi diş teli renkleri

Yakın zamanda bir arkadaşım, X temasını kullanarak oluşturduğu bir WordPress sitesinde yardım istemek için benimle iletişime geçti. Müşterisi, web sitesinin iPhone'unda düzgün görüntülenmediğini fark ettikten sonra o sabah onu aramıştı. Nick bunu kendisi kontrol etti ve elbette tasarladığı güzel, duyarlı tasarım artık çalışmıyordu.





Tarayıcı penceresini masaüstünde yeniden boyutlandırdığında sitenin oldu duyarlı, ancak iPhone'unda yalnızca masaüstü sürümü görüntüleniyordu. Neden bir site masaüstü bilgisayarda duyarlı ve mobil cihazda yanıt vermiyor mu?



Duyarlı Tasarım Neden Çalışmıyor?

Duyarlı tasarım, bir HTML dosyasının başlığında bir kod satırı eksik olduğunda çalışmayı durdurur. Bu tek satır kod 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 görüntü alanı tüm ekranı kuşatmak için.

Görüntü Alanı ve Görüntü Alanı Boyutu ile Ne Kastediyorsunuz?

Tüm cihazlarda, görüntü alanının boyutu, bir web sayfasının şu anda kullanıcı tarafından görülebilen alanının boyutunu ifade eder. 320 piksel genişliğinde bir iPhone 5 tuttuğunuzu hayal edin. Aksi açıkça belirtilmediği sürece iPhone'lar, ziyaret ettiğiniz her web sitesinin 980 piksel genişliğinde bir masaüstü sitesi olduğunu varsayar.

Şimdi, hayali iPhone 5'inizi kullanarak,800px genişliğinde masaüstü için tasarlanmış bir web sitesini ziyaret ediyorsunuz. Duyarlı bir düzeni olmadığından iPhone'unuz tam genişlikte masaüstü sürümünü görüntüler.





aksesuar desteklenmiyor iphone 11

Ancak bir iPhone 5 yalnızca 320 piksel genişliğindedir. Bu her zaman görüntü alanının boyutu değil mi?

Hayır değil. Görüntü alanı boyutu ile, ölçeklendirme dahil edilebilir . İPhone'un web sayfasının tam genişliğini görebilmesi için uzaklaştırması gerekir. Görüntü alanının, bir sayfanın şu anda kullanıcı tarafından görülebilen alanını ifade ettiğini unutmayın. İPhone kullanıcısı şu anda sayfanın yalnızca 320 pikselini mi görüyor yoksa tam genişlikte sürümü mü görüyor?

Doğru: iPhone varsayılan davranışını varsaydığı için ekranlarında tam genişlikte web sayfasını görüyorlar: Kullanıcı 980 piksel genişliğe kadar bir web sayfasını görüntüleyebilmek için uzaklaştırıldı. Bu nedenle, iPhone’un görüntü alanı 980 pikseldir.

Yakınlaştırdığınızda veya uzaklaştırdığınızda, görüntü alanı boyutu değişir. Daha önce hayali web sitemizin genişliğinin 800 piksel olduğunu söylemiştik, bu nedenle 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ı 800 piksel olur. Iphone Yapabilmek bir masaüstü sitede 320 piksellik bir görüntü alanına sahip, ancak öyleyse, yalnızca küçük bir bölümünü görüyor olacaksınız.

iphone'da ses düğmesi çalışmıyor

Duyarlı Web Sitem Bozuk. Nasıl Düzeltirim?

Yanıt, bir web sayfasının başlığına eklendiğinde aygıta görüntü alanını kendi genişliğine (iPhone 5 olması durumunda 320 piksel) ayarlamasını ve sayfayı ölçeklendirmemesini (veya yakınlaştırmamasını) söyleyen tek bir HTML satırıdır.

Bu meta etiketle ilgili tüm seçeneklerin daha teknik bir tartışması için, göz atın tutsplus.com'daki bu makale .

Duyarlı Olmadığında WordPress X Teması Nasıl Onarılır

Daha önce arkadaşıma dönelim: 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ı, her yığın için farklı başlık dosyaları kullandığını, bu nedenle sizinkini düzenlemeniz gerekeceğini unutmayın.

ipad wifi yanlış şifreye bağlanmıyor

Nick, X temasının Ethos yığınını kullandığından, daha önce bahsettiğim kod satırını x'te bulunan başlık dosyasına eklemek zorunda kaldı. /frameworks/views/ethos/wp-header.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ı (Bütünlük, Yenileme vb.) 'Ethos' yerine koyun. Bir satırı ekleyin ve işte! Gitmekte iyisin.

Bu, CSS Ortam Sorgularımı da Düzeltir mi?

Bu satırı HTML dosyanızın başlığına eklediğinizde, duyarlı @media sorgularınız aniden yeniden çalışmaya başlayacak ve web sitenizin mobil sürümü hayata geri dönecektir. Okuduğunuz için teşekkürler ve umarım yardımcı olur!

Payette Forward'ı Unutmayın,
David P.