Website Umfang nicht nach unten für mobile Bildschirme
Ich mache eine Website für desktop, tablet und Smartphone-Displays. Dafür bin ich mit css media queries. Wenn ich zum testen meiner website auf desktop-browser, und wenn ich den Maßstab meiner web-bowser unten, dann ändert sich das layout, wenn es erreicht die max-Breite von 740px wie bereits erwähnt in css. Aber das problem ist, wenn ich Teste diese auf meinem Handy, dann lässt es sich nicht ändern das layout, um fit mobile Bildschirme.
Ich bin mit 12 Spalten-layout-system und mit weniger css. Helfen Sie mir bitte, warum es sich nicht ändern das layout auf dem Handy zu passen, mobilen Bildschirmen.
Hier ist meine css-oder less-css, um genau zu sein
html, body {
height: 100%;
//overflow: hidden;
}
body {
min-width: 360px;
background-color: #ffffff;
#page {
width: 100%;
height: 100%;
overflow: auto;
}
.right {
position: relative;
right: 0;
}
//Extend column system (from defaults/layout.css)
.row {
clear: both;
> .container {
max-width: 1024px;
margin: 0 auto;
padding: 0 2% 0 2%;
.container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
&.one {
width: 8%;
}
&.two {
width: 16%;
}
&.three {
width: 25%;
}
&.four {
width: 33%;
}
&.five {
width: 41%;
}
&.six {
width: 50%;
}
&.seven {
width: 58%;
}
&.eight {
width: 66%;
}
&.nine {
width: 75%;
}
&.ten {
width: 83%;
}
&.eleven {
width: 91%;
}
&.twelve {
width: 100%;
}
}
}
}
}
/*Collapse columns*/
@media only screen and (max-width: 740px) {
.column, .column.one, .column.two, .column.three, .column.four, .column.five, .column.six, .column.eight, .column.nine, .column.ten, .column.eleven, .column.twelve,
.column.close-right, .column.one.close-right, .column.two.close-right, .column.three.close-right, .column.four.close-right, .column.five.close-right, .column.six.close-right, .column.eight.close-right, .column.nine.close-right, .column.ten.close-right, .column.eleven.close-right, .column.twelve.close-right {
//width: auto;
//float: none;
//clear: both;
margin-right: 0;
}
.column.third {
display: none;
}
.column.second {
width: 77%;
}
.column.first {
//min-width: 180px;
}
}
Du musst angemeldet sein, um einen Kommentar abzugeben.
http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/
Versuchen Sie, dies an den Anfang Ihrer HTML-Seite:
Dass soll der mobile browser wissen, dass die Seite Sie erbracht werden, auf die Größe von Ihrem Gerät/browser, statt zu faken die Display-Größe eines desktop-computer (und damit verwirrend, Ihre Medien-Anfragen).