Waarom werken mijn CSS3-mediaquery’s niet op mobiele apparaten?

In de stijlen.css gebruik ik mediaquery’s, die beide een variatie gebruiken van:

/*--[ Normal CSS styles ]----------------------------------*/
@media only screen and (max-width: 767px) {
    /*--[ Mobile styles go here]---------------------------*/
}

Het formaat van de sites wordt aangepast aan de lay-out die ik wil in een gewone browser (Safari, Firefox) wanneer ik het venster verklein, maar de mobiele lay-out wordt helemaal niet weergegeven op een telefoon. In plaats daarvan zie ik alleen de standaard CSS.

Kan iemand me in de goede richting wijzen?

Antwoord 1, autoriteit 100%

Dit waren alle drie nuttige tips, maar het lijkt erop dat ik een metatag moest toevoegen:

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

Nu lijkt het goed te werken in zowel Android (2.2) als iPhone…

Antwoord 2, autoriteit 15%

Vergeet niet om de standaard css-declaraties bovende mediaquery te plaatsen, anders werkt de query ook niet.

.edcar_letter{
    font-size:180px;
}
@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

Antwoord 3, autoriteit 4%

Ik vermoed dat het sleutelwoord onlyhier het probleem kan zijn. Ik heb geen problemen met het gebruik van mediaquery’s zoals deze:

@media screen and (max-width: 480px) { }

Antwoord 4, autoriteit 4%

Ik gebruikte bootstrap in een perssite, maar het werkte niet op IE8, ik gebruikte CSS3-mediaqueries.js Javascript maar werkt nog steeds niet. Als u wilt dat uw mediaquery werkt met dit JavaScript-bestand Toevoegen aan uw Media Query-lijn in CSS

Hier is een voorbeeld:

<meta name="viewport" content="width=device-width" />
<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

CSS-link-lijn zo eenvoudig als bovenleiding.

Antwoord 5, Autoriteit 3%

Vandaag had ik een vergelijkbare situatie. Mediaquery werkte niet. Na een tijdje vond ik die ruimte na ‘en’ ontbrak.
Goede mediaquery moet er als volgt uitzien:

@media screen and (max-width: 1024px) {}

Antwoord 6, Autoriteit 3%

Inclusief een metatag zoals hieronder kan ervoor zorgen dat de browser het viewport meteen opzag.

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

Antwoord 7, Autoriteit 2%

De sequentiële volgorde van CSS-code is ook belangrijk, bijvoorbeeld:

@media(max-width:600px){
  .example-text{
     color:red;
   }
}
.example-text{
   color:blue;
}

De bovenstaande code werkt niet omdat de uitgevoerde volgorde. Moet schrijven als volgt:

.example-text{
   color:blue;
}
@media(max-width:600px){
  .example-text{
     color:red;
   }
}

Antwoord 8

Vermeld altijd max-width en min-width in een eenheid zoals px of rem. Dit heeft het voor mij opgelost. Als ik het schrijf zonder de eenheid en alleen de getalwaarde, kan de browser de mediaquery’s niet lezen. voorbeeld:
dit is fout
@media only-scherm en (max-width:950)
en
dit klopt
@media only-scherm en (max-width:950px)

Antwoord 9

Het codefragment van het OP gebruikt duidelijk de juiste commentaarmarkering, maar CSS kan op een progressieve manier breken – dus als er een syntaxisfout is, zal alles daarna waarschijnlijk mislukken. Een paar keer heb ik vertrouwd op betrouwbare bronnen die onjuiste commentaarmarkeringenleverden die mijn stylesheet braken. Aangezien de OP slechts een klein deel van hun code heeft gegeven, zou ik het volgende willen voorstellen:

Zorg ervoor dat al uw CSS-opmerkingen deze opmaak gebruiken /*… */— wat volgens MDN de juiste commentaarmarkering is voor css

Valideer uw css met een linter of een veilige online validator. Hier is er een van W3

Meer informatie:
Ik ging de nieuwste aanbevolen mediaquery-onderbrekingspunten van bootstrap 4 controleren en eindigde met het kopiëren van de boiler plate rechtstreeks uit hun documenten. Bijna elk codeblok was gelabeld met opmerkingen in javascript-stijl //, die mijn code braken – en me alleen cryptische compileerfouten gaven waarmee ik problemen kon oplossen, wat me op dat moment te boven ging en me verdriet bezorgde .

IntelliJ-teksteditor stond me toe om commentaar te geven op specifieke regels css in een MINDER bestand met behulp van de sneltoets ctrl+/, wat geweldig was, behalve het voegt standaard //in bij niet-herkende bestandstypen. Het is geen freeware en minder is redelijk mainstream, dus ik vertrouwde het en ging ermee akkoord. Dat brak mijn code. Er is een voorkeurenmenu om het de juiste commentaarmarkering voor elk bestandstype te leren.

Antwoord 10

Het kan ook gebeuren als het zoomniveau van de browser niet correct is. De zoom van uw browservenster moet 100% zijn. Gebruik in Chrome Ctrl + 0om het zoomniveau opnieuw in te stellen.

Antwoord 11

Ik kwam dit probleem onlangs ook tegen en ontdekte later dat het kwam doordat ik geen spatie had geplaatst tussen anden (.
Dit was de fout

@media screen and(max-width:768px){
}

Vervolgens veranderde ik het in dit om het te corrigeren

@media screen and(max-width:768px){
}

Antwoord 12

Nog een antwoord in de ring gooien. Als je CSS-variabelen probeert te gebruiken, zal het stilletjes mislukken.

@media screen and (max-device-width: var(--breakpoint-small)) {}

CSS-variabelen werken niet in mediaquery’s (door ontwerp).

Antwoord 13

Vreemde reden die ik nog nooit eerder heb gezien: als u een “ouder > kind”-selector gebruikt buiten de mediaquery (in Firefox 69), kan deze de mediaquery verbreken. Ik weet niet zeker waarom dit gebeurt, maar voor mijn scenario werkte dit niet…

@media whatever {
    #child { display: none; }
}

Maar door de ouder toe te voegen aan een andere CSS verderop op de pagina, werkt dit…

#parent > #child { display: none; }

Het lijkt erop dat het specificeren van de ouder er niet toe doet, aangezien een id erg specifiek is en er geen dubbelzinnigheid mag zijn. Misschien een bug in Firefox?

Antwoord 14

Ik gebruik een paar methoden, afhankelijk van.
In dezelfde stylesheet die ik gebruik: @media (max-width: 450px), of voor aparte zorg ervoor dat je de link in de header correct hebt. Ik heb je fixmeup bekeken en je hebt een verwarrende reeks links naar CSS. Het werkt zoals je zegt, ook op HTC Desire S.

Antwoord 15

@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}
.username {
  margin-bottom: 20px;
  margin-top: 10px;
}

Antwoord 16

vanwege een niet-typfout werkt het niet voor mij
@media-scherm en (max-breedte: 930px) vereisen ruimte tussen de (en) & openingshaakje @media scherm en (max-breedte: 930px)

Antwoord 17

Voor mij had ik max-heightaangegeven in plaats van max-width.

Als jij dat bent, verander het dan!

   @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }

Antwoord 18

Voor iedereen die hetzelfde probleem heeft: zorg ervoor dat je ‘120px’ hebt geschreven in plaats van alleen ‘120’. Dit was mijn fout en ik werd er gek van.

Antwoord 19

Wel, in mijn geval, de pxnadat de breedtewaarde ontbrak … Interessant, de W3C Validator heeft deze fout niet eens opgemerkt, negeer de definitie.

Antwoord 20

Ik had hetzelfde probleem en blijkt dat mijn media-vragen in de verkeerde volgorde waren. Ze moeten worden gedefinieerd van breedste tot kleinste in de CSS