Chrome Cihaz Modu Emülasyonu Ortam Sorguları Çalışmıyor

94

Bazı nedenlerden dolayı, cihaz öykünme modu medya sorgularımı okumuyor. Önyükleme ile yaptığım kendi sitelerim de dahil olmak üzere diğer sitelerde çalışıyor, ancak sıfırdan kullandığım medya sorguları üzerinde çalışmıyor (medya sorguları düğmesine tıklamak düğmeyi maviye çeviriyor ancak hiçbir medya sorgusu görüntülenmiyor). Aşağıdaki dosyayı test edin. Bu Chrome'da bir hata mı yoksa dosyamda değiştirmem gereken bir şey mi var?

<!DOCTYPE html>
<!--
Media Queries Example 1
Sam Scott, Fall 2014
-->
<html>
<head>
    <title>MQ Example 1</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body { font-family: sans-serif; }
        h1 { color: red; } 
        h2 { color:blue; }
        p { color:green; }

        @media (max-width: 768px) and (min-width: 481px) {
            h1 { color: green; } 
            h2 { color:red; }
            p { color:blue; }
        }

        @media (max-width:479px), print { 
            h1,h2,p { color:black; }
        }

        @media print {
            body { font-family: serif; }
        }


    </style>
</head>
<body>
    <h1>I'm a first level heading</h1>
    <p>I'm a paragraph.</p>
    <h2>I'm a second level heading</h2>
    <p>I'm another paragraph.</p>
</body>
</html>

— Sam Scott
kaynak

2

Sam Scott: @ BananaNeil'in cevabı benimkinden daha tatmin edici, eğer yapabilirsen, onun cevabını en iyi cevap olarak işaretle.

— Kazıcı

247

Sayfama bir meta etiket ekleyerek bu sorunu çözdüm:

 <meta name="viewport" content="width=device-width">

GÜNCELLEME (Aralık 2019):

Görünüşe göre başlangıç ölçeği ve minimum ölçeği de şu şekilde ayarlamanız gerekebilir:

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

— MuzNeil
kaynak

7

bu benim için de çalıştı. Bunun neden sorunu çözdüğüne dair bir fikriniz var mı?

— Richie Thomas

@BananaNeil: Ben bile bu çözümün işe yaramasının nedeninin ne olduğunu merak ediyorum. Düşüncesi olan var mı ?

— dreamweiver

2

Görünüşe göre krom öykünücüsü bir 946pxsayfayı her zaman taklit ettiği boyuttaki ekrana dönüştürmeye ve küçültmeye çalışıyor . Sorunlu sayfanızın gövde etiketinin genişliğinin her zaman 946pxemülatörde olduğunu kontrol ederek bunun doğru olduğunu görebilirsiniz . Görüntü alanı etiketi, tarayıcıya sayfayı nasıl oluşturmaya çalışması gerektiğini söyler. her şeyi ölçeklendirirken width=device-widthbeklediğiniz gibi davranır width=100px. Burada bu konuda daha fazla bilgi edinebilirsiniz: w3schools.com/css/css_rwd_viewport.asp

— BananaNeil

2

Aşırı büyütme yaptıysanız da tuhaf davranabilir ... Yalnızca girebileceğiniz boyutları alırsınız. Mac'te, cmd kayması yaparsanız -, sonunda mobil emülatör listesi içindeki Galaxy S5, iPhone 6 vb.

— İle

1

Bunun varsayılan olmadığını hatırlamak zor;)

— doublejosh

19

Kabul edilen cevap benim için yapmadı, bir minimum-scale=1de eklemek zorunda kaldım .

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

— Sanjsanj
kaynak

1

haklısın bu eklenen özelliğin farkında değildimminimum-scale = 1 .. thx

— adnan tarih

6

Chrome'daki cihaz emülasyonu hala bir WIP'dir. Dürüst olmak gerekirse, bunu Chrome'a biraz erken aktardıklarını düşünüyorum. Öykünmeyi test etmek için Canary'yi (krom beta tarayıcı) kullanmayı deneyin, bunun Chrome'dakinden çok daha iyi çalıştığını görüyorum.

— Digger
kaynak

0

Benim için çalışıyor.

Sayfanızın baş bölümüne bir görüntü alanı meta etiketi koyun. Örneğe bakın:

 <head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>

— Nati Kamusher
kaynak

0

Bu meta etiketi kodunuza ekleyin:

<head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>

Snippet'i genişlet

— Williamvivas
kaynak

0

Ekran boyutuna bağlı olarak aynı kurallar kümesi için birden fazla uygulamaya sahipsem:

Sonraki sorgu tarafından üzerine yazılmaması için aynı ortam sorgusu için hem minimum hem de maksimum genişliği belirtin:

@media screen and (min-width:9px , max-width:9px) {

    css.selector { 

        style rules gets applied : in this range of screen sizes ;

    } 

}


css.selector{


    the other style get applied : starting from 10px ;

}

Veya tümü için en az bir kesme noktası ayarlayın:

@media screen and (min-width:9px) {

    some styles get applied : starting from this point ;

}

}

@media screen and (min-width:99px) {

    some styles gets applied : starting from this point ;

}

}

— Mostafa
kaynak