Mobil Telefonlarda Görüntü ve Yazı Boyutlandırılması

Görüntüleri ve içeriği kesin mobil kullanıcılar için değil

  • Yukarıdaki resim, içeriği doğru olarak gösteren bir mobil sayfayı ve içeriğin görünüm portasıyla boyutlandırılmadığı bir sayfayı göstermektedir.
  • Resimler ve metinler ekrandan çıktığında içeriği görmek için bir kullanıcının yanlamasına ilerlemesi gerekir.

Bir görüş alanı nedir?

Bir görünüm penceresi, bir web sayfasının ne kadar büyük bir pencerede görüntüleneceğini bildirir. Görüntü pencereleri hakkında daha fazla bilgi için – buraya gidin

Duyarlı web tasarımında, görüntüleme alanını Google’ın önerdiği 1değerine göre yapılandırmamız gerekir ..

<meta name=viewport content="width=device-width, initial-scale=1">

Bazen görüntü alanı yapılandırıldıktan sonra, içerik kesilmek gibi bir sorun keşfederiz.

Bunun nedeni, düzgün yapılandırılmış bir görüntüleme içeriği, içeriğin herhangi bir sayfada görülen genişliğe kadar içeriğini görüntüleyeceğidir.

Dolayısıyla, birisi içeriğinizi görmek için bir telefon kullanıyorsa ve telefon 300 pikseldir, web sayfalarınız 300 piksel genişlikte görüntülenir.

Sık karşılaşılan sorunlar

İçeriğinizin bir kısmı kesilirse veya içeriğinizi görmek için bir kullanıcının yatay olarak kaydığında bu kötüdür.

Bu sorun, html dosyanızda görüntüleme penceresinden daha büyük bir şey boyutlandırıldığında (örnek durumumuz – 300 piksel) oluşmaktadır.

Ortak bir durum, mutlak değerler kullanarak bir görüntünün genişliğini açıkça bildirmiş olabileceğiniz yerdir.

<img src=example.png style=width:500px; >

Bu durumda, birisi bir görüntünün 500 piksel olması gerektiğini söyledi. Bu, 500 piksel genişliğindeki cihazlarda görüntünün kesilmesi anlamına gelir.

Çözüm

Görüntünün genişliğini açıkça (tam piksel sayısıyla) beyan etmemenizi düzeltmek için, genişliği yüzde veya başka bir göreceli ölçüm olarak beyan ederdiniz.

<img src=example.png style=max-width:100%; >

Yukarıdaki örnekte bir resim kullandık, ancak gerçekte html’nin herhangi bir öğesi bu durumda kendini bulabilir.

Duyarlı tasarımıyla, yaptığınız her şey için göreceli ölçümler kullanmak her zaman en güvenlidir (% veya em gibi şeyleri). Okunabilir metin yönergelerinin ardından, görüntüleme alanına göre boyutlandırılmamış içeriğe rastlamama veya düzeltme konusunda yardımcı olacaktır.

Üçüncü taraf widget’lar / çerçeveler / videolar

İçeriğiniz görüntüleme alanı için mükemmel bir boyutta olabilir, ancak üçüncü taraflardan (youtube’dan bir video gibi) bir şeyler sayfalarınıza gömülmüş olabilir.

Sayfalarınızın tamamı değil bir kısmında “içeriği görüntüleme için boyutlandır” hatası alıyorsanız, bakmanız gereken ilk yerlerden biri üçüncü taraf içeriğidir.

Aracı olmayan bu sorunu bulma

Bir mobil sayfanın görüntüleme alanına boyutlandırılmamış bir içeriği ne zaman olduğunu belirlemek kolaydır. Akıllı telefonunuzdaki bir sayfaya giderseniz ve sayfayı soldan sağa doğru oynatırsanız, sayfada iyi olmayan bir şey var demektir.

Duyarlı sayfalar genel olarak gösterildiği cihazın görüntüleme alanını dolduracak şekilde tasarlanmıştır. Sola ve sağa kaydırabiliyorsanız, muhtemelen bir şey yanlış.

Sayfa içeriğiniz iyi oluşturulması için belirli bir görüntü alanı genişliğine dayanmamalıdır

Google şunları önerir: 2

  • Sayfa öğeleri için geniş mutlak CSS genişliklerini ayarlamaktan kaçının; çünkü bu, öğenin daha dar bir cihazdaki görüntüleme alanı için çok geniş olmasına neden olabilir (örneğin, bir iPhone gibi 320 CSS piksel genişliğinde bir cihaz). Bunun yerine, göreli genişlik değerlerini kullanmayı düşünün.
  • Elemanın küçük ekranlarda görüntüleme alanının dışına çıkmasına neden olabilecek büyük mutlak konumlandırma değerlerini kullanmaya dikkat edin.
  • Gerekirse, küçük ve büyük ekranlar için farklı stil uygulamak için CSS ortam sorguları kullanılabilir.

Google ayrıca şu açıklamaları yapar: 3

“Hem masaüstü bilgisayarlarda hem de mobil cihazlarda kullanıcılar web sitelerini yatay olarak değil dikey olarak kaydırmaya ve kullanıcının sayfanın tamamını yatay olarak kaydırmaya veya uzaklaştırmaya zorlayarak zayıf bir kullanıcı deneyimine neden oluyor.”

Kısa Özet
Yayın Tarihi
Konunun Adı
Mobil Telefonlarda Görüntü ve Yazı Boyutlandırılması
Verilen Puan
51star1star1star1star1star

Leave a Reply

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir