CSS для мобильного макета

Мне нужна помощь в настройке CSS для моего сайта, чтобы его мобильный телефон был дружественным. Когда вы открываете сайт в крупных настольных браузерах, таких как Chrome, IE и Firefox, все отображается правильно, но если я открою сайт в мобильных Safari или Chrome, рендеринг отключен. Как ни странно, IE mobile также корректно отображает сайт.CSS для мобильного макета

jsfiddle здесь: https://jsfiddle.net/1mxLfzyb/

URL-адрес для прямой трансляции http://lazyquiz.azurewebsites.net.

HTML

<!doctype html> 
<html> 
    <html lang="eng"> 

     <head> 
      <meta charset="utf-8" /> 
      <title>Lazy Quiz</title> 
      <link rel="stylesheet" href="default.css" /> 
     </head> 

     <body> 
      <div class="wrapper"> 
       <header class="header">LAZY QUIZ</header> 
       <article class="main"> 
        <h2>Quiz of the Day!!</h2> 

        <iframe src="pages/QOD/qod.html"></iframe> 
       </article> 
       <aside class="aside aside-1"> 
        <ul> 
         <li><a href="pages/Entertainment/entertainment.html">Entertainment</a> 

         </li> 
         <li><a href="pages/Entertainment/entertainment.html">Sports</a> 

         </li> 
         <li><a href="pages/Entertainment/entertainment.html">Games</a> 

         </li> 
         <li><a href="pages/Entertainment/entertainment.html">Geography</a> 

         </li> 
         <li><a href="pages/Entertainment/entertainment.html">History</a> 

         </li> 
        </ul> 
       </aside> 
       <aside class="aside aside-2">Aside 2</aside> 
       <footer class="footer"> 
        <ul> 
         <li>Home</li> 
         <li>About</li> 
         <li>Contact</li> 
        </ul> 
       </footer> 
      </div> 
     </body> 

    </html>

CSS

html{ 
    margin:0px; 
    padding:0px; 
    background-color:#a8a8a8; 
} 
/* 
body { 
    padding: 2em; 

} 
*/ 
.wrapper { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 

    font-weight: bold; 
    text-align: center; 
    width:1000px; 
    margin:0px auto; 
} 

.wrapper > * { 
    padding: 10px; 
    flex: 1 100%; 
} 

.header { 
    background:black; 
    color:white; 
    padding:20px; 
    margin:10px; 
} 

.aside-1 { 
    background: gold; 
    margin:10px; 
    background:#ededed; 
    width:100px; 
    height:575px; 
} 
.aside-1 li { 
    list-style:none; 
    font:bold 14px Tahoma; 
    padding-bottom:75px; 
    text-align:left; 
    } 

.aside-1 a:link{ 
    text-decoration:none; 
    color:black; 
} 

.aside-1 a:visited{ 
    text-decoration:none; 
    color:black 
} 

.main { 
    background: deepskyblue; 
    margin:10px; 
} 

iframe { 
    display:block; 
    width:100%; 

    height: 500px; 

    } 

.aside-2 { 
    background: #66CCCC; 
    margin:10px; 
    width:100px; 
    height:575px; 
} 

.footer { 
    border-top:2px solid #e0e0e0; 
    margin:10px; 
} 
.footer ul{ 
    padding:0px; 
    text-align:left; 
} 

.footer li{ 
    padding:5px; 
    display:inline-block; 
    list-style:none; 
    font:bold 14px Tahoma; 
    margin:0px; 
    justify:left; 
} 

@media all and (min-width: 600px) { 
    .aside { flex: 1 auto; } 
} 

@media all and (min-width: 800px) { 
    .main { flex: 4 0px; } 
    .aside-1 { order: 1; } 
    .main { order: 2; } 
    .aside-2 { order: 3; } 
    .footer { order: 4; } 
}

источник

2015-05-29 DBS

Изменение HTML по типу устройства (настольная, мобильная, таблетка) называется адаптивным дизайном. Попробуйте «отзывчивый дизайн» в googling, и вы получите много примеров и руководств. – Diptendu

использование медиа запросов

примеры медиа Query

@media only screen and (min-width: 1490px) 
{ 
} 
@media only screen and (max-width: 1490px) and (min-width: 1366px) 
{ 
} 
@media only screen and (max-width: 1366px) and (min-width: 1280px) 
{ 
} 
@media only screen and (max-width: 1280px) and (min-width: 1024px) 
{ 
} 
@media only screen and (max-width: 1024px) and (min-width: 768px) 
{ 
}

Мое мнение является использование Bootstrap Framework. Вы можете узнать на here

EDIT 01

.wrapper { 
    width: 100%; 
}

источник

2015-05-29 05:04:25

Он уже использует медиа-запросы – Donald

Попробуйте добавить мета видового экрана: Mozilla Developer

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

источник

2015-05-29 03:25:14

width: 1000px; стиль на ваш .wrapper элемент должен быть изменен на max-width: 1000px;. Это позволит вашему сайту по-прежнему содержать ширину 1000 пикселей в широких видовых экранах, но позволит уменьшить масштаб на более узких видовых экранах, не заставляя его шириться 1000 пикселей, делая сайт чутким.

источник

2015-05-29 04:28:14 Donald

CSS для мобильного макета

ответ

Смежные вопросы