Akıllı telefon boyutuna HTML değişikliği görünümü ile ilgili temel sorun, web sitesinin yanıt vermemesine veya yanlış görüntülenmesine neden olabilmesidir. Bunun nedeni, görüntü alanı değiştirildiğinde web sitesinin daha küçük bir ekran boyutu için optimize edilemeyebilmesi ve içeriğini gerektiği gibi küçültemeyebilmesidir. Ayrıca, gezinme menüleri veya etkileşimli öğeler gibi bazı özellikler daha küçük ekran boyutlarında düzgün çalışmayabilir.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. Bu kod satırı, tarayıcıya HTML belgesi hakkında bilgi sağlayan bir meta etikettir.
2. Ad özniteliği, tarayıcıya bu etiketin sayfanın farklı cihazlarda nasıl görüntülenmesi gerektiği hakkında bilgi içerdiğini söyleyen "görüntü alanı" olarak ayarlanmıştır.
3. İçerik özelliği, tarayıcıya sayfanın genişliği olarak cihazın genişliğini kullanması ve gerekirse oradan yukarı veya aşağı ölçeklendirmesi gerektiğini söyleyen “width=device-width, startup-scale=1.0” olarak ayarlanmıştır.
Duyarlı Web Tasarımı
Duyarlı web tasarımı, web sayfalarının çeşitli cihazlarda ve pencere veya ekran boyutlarında iyi görüntülenmesini sağlayan bir web tasarımı yaklaşımıdır. Esnek ızgaralar ve düzenlerin, görüntülerin ve CSS medya sorgularının akıllı kullanımının bir kombinasyonunu kullanır. Duyarlı web siteleri, çok çeşitli cihazlarda (masaüstü bilgisayar monitörlerinden cep telefonlarına kadar) en uygun görüntüleme deneyimini (minimum yeniden boyutlandırma, kaydırma ve kaydırma ile kolay okuma ve gezinme) sağlamak için tasarlanmıştır.
HTML'de, duyarlı tasarım aşağıdaki teknikler kullanılarak elde edilebilir:
• Esnek ızgaralar – Mizanpaj öğeleri için piksel gibi sabit genişlikli birimler yerine yüzdeler veya ems gibi göreli birimlerin kullanılması, sayfanın farklı ekran boyutlarına esnek bir şekilde uyum sağlamasına olanak tanır.
• Medya sorguları – CSS3 medya sorguları, geliştiricilerin farklı cihaz genişlikleri için farklı stiller belirlemesine olanak tanır. Bu, sayfa düzeninin kullanılan cihaza göre uygun şekilde ayarlanmasını sağlar.
• Duyarlı görüntüler – HTML5'teki srcset özniteliği kullanılarak görüntüler duyarlı hale getirilebilir; bu, geliştiricilerin bir görüntünün farklı cihazlar için farklı çözünürlüklerde birden çok sürümünü belirtmesine olanak tanır.
• Esnek videolar – Videolar, geliştiricilerin boyutlarına bağlı olarak kapsayıcıları içinde nasıl ölçeklenmesi gerektiğini belirlemesine olanak tanıyan CSS'deki object-fit özelliği kullanılarak duyarlı hale getirilebilir.
Görünüm meta etiketi
Viewport meta etiketi, tarayıcıya sayfanın boyutlarını ve ölçeklemesini kullanılan cihaza uyacak şekilde nasıl ayarlayacağını söyleyen bir HTML öğesidir. Bir web sayfasının akıllı telefonlar ve tabletler gibi farklı cihazlarda nasıl görüneceğini kontrol etmek için kullanılır. Viewport meta etiketi, bir web sayfasının genişliğini ayarlamak, yukarı veya aşağı ölçeklendirmek ve kullanıcıların yakınlaştırıp uzaklaştırmalarına izin verilip verilmeyeceğini belirlemek için kullanılabilir. Başlangıç ölçeğini, maksimum ölçeği, kullanıcı tarafından ölçeklenebilir özellikleri ve daha fazlasını ayarlamak için de kullanılabilir.
Web sitemi telefon ekranıma nasıl sığdırabilirim?
Bir web sitesini HTML olarak telefon ekranına sığdırmak için viewport meta etiketini kullanabilirsiniz. Bu etiket, web sitenizin farklı cihazlarda nasıl görüntüleneceğini kontrol etmenizi sağlar. Görünüm alanının genişliğini cihazın genişliğine eşit olacak şekilde ayarlayabilirsiniz, böylece web siteniz boyutunu herhangi bir cihazın ekranına sığacak şekilde otomatik olarak ayarlayacaktır. Ek olarak, web sitenizin farklı cihazlarda nasıl göründüğünü daha da özelleştirmek için CSS kodunuzdaki medya sorgularını da kullanabilirsiniz.
