@media screen css-Eigenschaft funktioniert nicht

Fügte ich @media screen css in eine Anstrengung, um die änderung meiner website, aber es scheint nicht zu reagieren. Ich fügte hinzu, meta name = "viewport" content="width=1200, width=device-width" auf das HTML-und das war das einzige, was erfolgt, wie meine Website aussieht, auf meinem Handy. In der CSS habe ich noch die folgenden, aber es hat keine Wirkung.

@media screen
and (max-device-width: 768px)
and (orientation: portrait) {
   body {
   max-width: 600px;
}
   #sidebar {
     width: 0;
   }
}

@media screen
and (max-device-width: 1000px)
and (orientation: landscape) {
  body {
    max-width: 800px;
  }
    #sidebar {
        width: 0;
    }
}

So wie ich:

Diese zu arbeiten, ist mein CSS falsch?
Gibt es eine Möglichkeit, speziell loszuwerden, die #sidebar im @media screen css?

display:none; ist besser als width:0;. Aber Ihr code sollte noch in Arbeit.
kann u geben Sie einen link von der website wo du es versucht?

InformationsquelleAutor London804 | 2013-03-07

1

Probieren (Nicht Getestet)
```
@media handheld and (orientation: landscape), 
  screen and (max-width: 1000px) {

 body {
    max-width: 800px;
  }

 #sidebar {
    width: 0;
 }

}
```
- Nein, das nicht' arbeiten, irgendwelche anderen Vorschläge?
- nun, es sollte funktionieren, also entweder etwas falsch irgendwo anders oder versuchen Sie es mit EM und machen ein Turnschuh
- Also, was war das problem dann?
InformationsquelleAutor iConnor
0

Ist es möglich, dass eine alte version der CSS-Datei (vor Ihrer änderungen) hat sich im Cache-Speicher von Ihrem Telefon. Wenn Sie PHP auf einem schönen Weg, dies zu umgehen ist:
```
<link  href="styles.css?ver=<?php print filemtime('styles.css') ?>">
```
So, das stylesheet nur redownloaded, wenn es sein muss.

Wenn Sie nicht über PHP, können Sie immer ändern Sie einfach die ?ver= Parameter von hand jedes mal, wenn Sie eine änderung in der CSS-Datei.

Dies kann oder kann nicht Ihr problem sein, ich weiß es nicht. Aber es könnte helfen.
- Nein ich habe die cookies gelöscht und den Verlauf auf safari und habe auch versucht es auf meinem Vater. Die CSS korrekt ist, obwohl Recht?
- Ja, ich denke so... und es ist cache würden Sie wollen, zu löschen, cookies und Geschichte.
- Ja hab das kein Glück
InformationsquelleAutor
0

Code sieht in Ordnung für mich. Haben Sie versucht, zu tun, einen hard-refresh?

shft + f5, um meine Erfahrungen fixes CSS, wenn Sie nicht bemerken, den eine Voreinstellung angewendet wurde. Auch das löschen des cache hilft auch!

Auch, um loszuwerden, #sidebar
```
#sidebar{
    display:none;
}
```
verstecken Sie es, wenn Sie schlagen Ihre @media.
Hoffe, das hilft 🙂
- Ja, ich Lösch mein cache auf meinem Handy und computer, und es scheint, haben keine Wirkung hatte. Vielen Dank für die #sidebar-bit ich habe das sonst noch wo in meinem code, ich sollte herausgefunden haben, um es zu stellen gibt. Gibt es sonst noch etwas in meinem html-Code, ich muss hinzufügen, vielleicht?
- Ich habe die sidebar etwas und bekam es loswerden. Danke, es ist lustig, an anderer Stelle in meinem code hab ich das aber Total vergessen es hier.
- Es scheint, dass ich brauchte, um loszuwerden content="width=1200". Auf Chrome-mobile den Wunsch Breite erreicht war auf Safari mobile, es war nicht perfekt, aber gut genug für jetzt. Ich werde weiter basteln Sie. Nicht @media-Bildschirm, wohl um zu arbeiten, auf laptops und PCs sowie?
InformationsquelleAutor Akira Dawson
0

@media funktioniert für alles. e.g mein Handy hat eine Breite von 720px für zB. wenn Sie CSS @media für mobile auf 720px; das folgende CSS gilt, wenn das Sinn macht. Lesen sollte auf mobile-first responsive design, wenn es das ist, was man versucht zu erreichen, aber das ist ein ganz anderes Thema. Wie für den code in der @media-sind Sie mit der Ausrichtung auf mobile Geräte, nicht laptops/Computer. Incase, du bist nicht bewusst. also, wenn ich mir denke, rechts die CSS-gilt nur für mobile Geräte. Für laptops/pc, @media (max-width: xxxpx) {} würde es tun 🙂

InformationsquelleAutor Akira Dawson
0

Danke an Akira Dawson für den display-Teil. Es scheint, dass ich brauchte, um loszuwerden content="width=1200", ordnungsgemäß angezeigt auf meinem iPhone. Außerdem, was ich letztendlich Tat, war, entledigte sich der @media-Bildschirm und es geändert @media handheld, um wirksam zu werden auf meinem iPhone. Aus welchem Grund auch immer @media screen nicht funktionieren würde. Es ist interessant, weil mir gesagt wurde @media handheld nicht funktioniert auf dem iPhone aber anscheinend nicht.

InformationsquelleAutor London804
0

Soweit ich es verstehe content="width=1200 sagt, dass Ihre Website braucht ein viewport mindestens 1200px, die im Gegensatz zu max-device-width: 768px

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> sollte vermutlich dein problem lösen.

Quelle: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

InformationsquelleAutor Dirk

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.