Max-device-width mi yoksa max-width mi kullanmalıyım?

Question 1

CSS medya sorgularıyla, max-device-widthbir cihaz genişliğini (iPhone veya Android cihazı gibi) ve / veya max-widthbir sayfa genişliğini hedefleyen bir cihazı hedeflemek için kullanabilirsiniz .

Eğer kullanırsanız max-device-widthmasaüstü değişim boyutu değil, çünkü masaüstünüzde tarayıcı penceresinin boyutunu değiştirdiğinizde, CSS, değişmez.

Eğer kullanırsanız max-widthmasaüstünüzde tarayıcı penceresinin boyutunu değiştirdiğinizde, bu tür dokunmatik dostu elemanları ve menüler ve bu tür şeyler gibi mobil odaklı stil gösterilebilir.

Belirli tarayıcıları (ve cihazları?) Hedeflemek artık kullanımdan kaldırıldı ve hedeflediğiniz şey konusunda biraz daha agnostik olmalısınız. Bu medya sorguları için de geçerli mi?

Neden birini diğerine hedef aldın? Hangisi tavsiye edilir?

Bu, bir üretim web sitesinde kullandığım bir medya sorgusu örneğidir:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) {  
    /* Change a menu to fit the screen better, etc... */
}

İkisini de kullanma eğilimindeyim max-device-widthve max-width.

Question 2

TL; DR

Eğer Duyarlı bir web sitesi yapıyoruz, kullanım min-width/ max-widthmedya sorguları yerine de min-device-width/ max-device-widthsırayla ekran boyutları daha geniş bir yelpazede hedef.

2018 Ortam Sorguları Seviye 4 spesifikasyon taslağına göre, device-widthortam özelliği kullanımdan kaldırılmıştır . Geriye dönük uyumluluk için saklanacaktır, ancak kaçınılmalıdır.

8. Ek A: Kullanımdan Kaldırılan Medya Özellikleri

Görünümün boyutuna (veya sayfa medyada sayfa kutu) için sorguya için width, heightve aspect-ratiomedya özellikleri yerine, kullanılması gereken device-width, device-heightve device-aspect-ratione olursa olsun cihazın fiziksel boyutuna atıfta hangi ne kadar alan için kullanılabilir düzenlenen belge. device-*Medya özellikleri de bazen mobil cihazları tespit etmek vekil olarak kullanılmaktadır. Bunun yerine, yazarlar, stil oluşturmaya çalıştıkları aygıtın yönünü daha iyi temsil eden medya özelliklerini kullanmalıdır.

Bir yan not olarak, bir belirlendiğini hatırlayın görünüm meta etiketi içinde <head>belgenizin bölümünde:

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

Açıklama

Belirli bir cihazın sahip olabileceği tüm farklı olası ekran çözünürlükleri ve piksel yoğunlukları nedeniyle, bir piksel piksel değildir, çünkü dikkate alınması gereken birkaç şey vardır (yakınlaştırma, piksel yoğunluğu, ekran çözünürlüğü ve boyutu, cihaz yönü, en boy oranı vb.) ..). Bu durumda, bir piksel aslında "optik referans birimi" olarak adlandırılır donanım pikselinden ziyade .

Neyse ki, bir belirtebilirsiniz görünüm meta etiketi içinde <head>tarayıcının görüntü alanının genişliği ve ölçeklendirme kontrol etmek için belgenizin bölümünde. Bu etiketin contentdeğeri varsa width=device-width, ekranın genişliği cihazdan bağımsız piksellerle eşleşecek ve tüm farklı cihazların ölçeklenip tutarlı şekilde davranmasını sağlayacaktır.

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

Medya sorguları açısından, muhtemelen kullanmak isteyeceğiniz max-widthyerine max-device-widthberi, max-widthgörünüm (geçerli tarayıcı penceresi) hedefleyecektir oysamax-device-width cihazın gerçek tam ekran boyutu / çözünürlük hedefleyecektir.

Başka bir deyişle, kullanıyorsanız max-device-width, masaüstü tarayıcınızı yeniden boyutlandırırken farklı medya sorgularının uygulandığını görmezsiniz, çünkü aksine max-width, yalnızca cihazın gerçek tam ekran boyutu dikkate alınır; tarayıcı penceresinin geçerli boyutu değil.

Bu, uyarlanabilir bir düzen oluşturmaya çalışıyorsanız büyük bir fark yaratır, çünkü tarayıcı yeniden boyutlandırıldığında site yanıt vermeyecektir. Ayrıca, max-device-widthdaha küçük ekranlı cihazları hedeflemek için kullandığınız medya sorgularını kullanıyorsanız, tarayıcı penceresini söz konusu daha küçük ekran boyutuyla eşleşecek şekilde yeniden boyutlandırırken bile masaüstlerine uygulanmaz.

2018 itibariyle, en son medya sorgusu spesifikasyon taslağıdevice-width medya özelliğini gerçekten kullanımdan kaldırmıştır , bu nedenle bundan kaçınılmalıdır.

Ayrıca , Google Developers hakkındaki bu makale aşağıdakilerin kullanımını kesinlikle önermemektedir max-device-width:

Google Developers - Web Fundamentals - Duyarlı CSS medya sorguları

Aşağıdakilere dayalı olarak sorgular oluşturmak da mümkündür *-device-width; bu uygulama kesinlikle önerilmez .

Fark ince ama çok önemli: min-width tarayıcı penceresinin boyutuna bağlıdır, oysa min-device-widthekranın boyutuna bağlıdır. Maalesef, eski Android tarayıcısı da dahil olmak üzere bazı tarayıcılar, cihaz genişliğini doğru bir şekilde rapor etmeyebilir ve bunun yerine ekran boyutunu beklenen görüntü alanı genişliği yerine cihaz pikselleri olarak bildirebilir.

Ayrıca *-device-width, sorgu tarayıcı penceresinin boyutuna değil, gerçek aygıt boyutuna dayandığından, içeriğin masaüstlerinde veya pencerelerin yeniden boyutlandırılmasına izin veren diğer aygıtlarda uyarlanmasını engelleyebilir.

Daha fazla okuma:

Question 3

Cihaz genişliğinden kaçının. Nedeni, kullanıcıların tarayıcılarının buna nasıl yanıt verdiğini bilemezsiniz.

IOS için, en azından Safari ile basit görünüyor. Yönlendirmeden bağımsız tek bir cihaz genişliği yanıtı gibi görünüyor. Ayrıca, cihaz genişliği yalnızca cihazın kısa tarafı için belirtilir. Bunu iPhone 4S ve iPad'de test ettim. Hangi yönelim olursa olsun sırasıyla 320 ve 768'e yanıt verdiler.

Android için daha tahmin edilemez. Huawei Ascend Y330'da (Android varsayılan tarayıcı, Chrome, Opera, Firefox, Firefox Beta, Dolphin) altı tarayıcıyı test ettim. Yanıt, tarayıcı türüne ve yönüne göre değişir.

Sorguyla (max-device-width: *** px) bir sayfada test ettim ve sorguyu gerçek bir duruma getirmek için hangi px değerini doldurmam gerektiğini buldum. Tarayıcı türüne ve yönüne bağlı olarak dört farklı değere (320, 480, 534, 800) ihtiyaç vardı. Bu, cihaz genişliğini kullanılamaz hale getirir.

Question 4

Maksimum genişlik kullanırsanız, masaüstünüzdeki tarayıcı penceresinin boyutunu değiştirdiğinizde, dokunmatik öğeler ve menüler gibi mobil odaklı stiller ve bu tür şeyler gösterilebilir.

Bunun arzu edilir olduğuna dair popüler bir görüş gibi görünmesi beni şok ediyor. Mobilden önce sıvı / sıvı tasarımının yanlış mı yoksa doğru nedenlerle kötü olarak kabul edilip edilmediğini anlamadım. Bana öyle geliyor ki, bu sadece sıvı düzeninin daha güzel bir versiyonu, ancak tasarımcıların bir nedenden dolayı benimsediği bir versiyon.

Tasarım topluluğu 2000'lerin ortasında sıvı yerine sabit mizanpajlarla yan yana olmayı seçtiğinde, bunun nedeni metin yeniden akışlarının okunabilirliği engellemesi, genellikle dullar ve diğer tipografik eserlerle sonuçlanmasıydı. Ek olarak, kod tabanını korumak, öğelerin çarpışmasını vb. Önlemek için genellikle tasarımdan tasarıma kadar zahmetliydi. Sıvı düzenler ile duyarlı tasarım arasındaki tek fark, daha iyi tarayıcılar ve duvar benzeri çerçevelerin çoğalması nedeniyle yanıt vermenin başarılmasını kolaylaştırmasıdır.

Ben kişisel olarak min / max-device-width kullanıyorum çünkü onlarca yıllık önceliğe sahip masaüstü belge kurallarını takip etmeyi tercih ediyorum. İnternette açtığınız tüm belgeler bir masaüstünde bu şekilde davranmayacağı gibi, masaüstünüze yüklediğiniz diğer belge türleri veya uygulamalar da olmayacaktır. Tıpkı MS Word, Photoshop vb. Gibi mobilin hakimiyetinden önce tasarlanan sayfalar kaydırma konumlarını korurlar ve mizanpajlarını değiştirmezler, kullanıcıların pencere yönetiminin ilgisiz görevini yerine getirirken sayfa akışı içindeki içeriği takip etmesine izin verir.

Genelde 3 kesme noktası kullanıyorum: biri telefonlar için, biri tablet için ve diğeri masaüstü için. Masaüstü ve çoğu zaman en azından yatay portre sabittir ve tabletin portresi ve altı sıvıdır. Bu uyarlanabilir ve duyarlılık kombinasyonu, masaüstünün bir masaüstü sitesi gibi davranmasına izin verirken, beni 10 küsur ayrı sabit genişlikte mobil cihaz düzenini düzenlemeye gerek kalmadan tutuyor. Görüntü alanı yeniden boyutlandırılamadığı için metin mobil cihazlarda yeniden akıtılmaz.