html - Viewport doesn't work -
i'm practicing in using @media queries. here part of html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="js/script.min.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" href="img/sprite.svg" type="image/svg+xml"> </head> <body> <header class="page-header"> <div class="page-header__logo-wrap"> <a href="/" class="page-header__logo-link"> <svg class="page_header__tablet-logo" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 147 40" width="147" height="40" id="logotype-white-tablet" y="1948"><image id="logotype-white-tablet-logotype-white-tablet.svg" width="147" xlink:href="data:img/png;base64,ivborw0kggoaaaansuheugaaajmaaaaocaqaaabq4qaoaaaabgdbtueaalgpc/xhbqaaacbjsfjnaab6jgaagiqaapoaaaca6aaadtaaaopgaaa6maaaf3ccule8aaaaamjlr0qaakqniziaaaajcehzcwaacxiaaassadldfvwaaaahdelnrqfhcbupkx7bwancaaafnuleqvro3t1a4xmcobb9+mv/uwl0coraualjdkgf2xrakscpahewtgwyk9i9cnztazsk3v1acame0llmsg78b7psspm0epozayyegwuesjinmywwfmzlxirpcj2/ovbwt1vkg3spj9l0mwkfd45pdeun2gq6um9t30fbtdfwvmwopkbjyoz1/8qjmgljdh8bkknzsthwf7dmdusv+iqmmcxybw3l7aa0p1u1kvaw0pdbw3mrgale72wl/wxrq1vbeasz+lxatx+37etwli6ro/n0dwa4rjvq8qyfsq1nxii9to3035apizjw9/3wji8rdrntpaca9xxhanvnw5t8g5iiwaw4xh/mtt2m08yuxnybyrct3nro66wdkqowljp1+v9adrodair/gjl6/dnwri8u5j5mys7afemuaxazegql7k2vqbfi7vzesvo6tcxlykralnd6u+pk1zvmosenyoxtc7kh0u+kwfxkz6iknyvx8cldmetkrfi0fuhqscgdgavspsupfdyz9nr9dtzhoag6uxlwtykzf6jo9p2j2jsdlaealsb1td1wow+aci1d+3mzeuoa1cjrfgio9nnz3oiehw6qi37giasejb51kwnfh+toqcvqg/6kf/agqoaeuea8hckfkguad2siyac35782qhpy8zn5guwn9bxrpm2omsmuujaajnigy0xmjvccho7izhhzy7olyrxyp2qdfpy+yy2vtk7om1lsmpjhpmirxr0d/hhttcatos+0mclq9ss2mjvizanrgnj518sawweuc+zkh8ka+zboo4apm0/u0rej0wgkw0y1fyuhukn2ddugbwpuflcppdrvmhulks7aplgb+/w1mplastzx/3gkpsya+8mtm3wfgjhavm1gpv0pk1miba6m3voglsta5aejd4zo3yg1sx8lpszjbd8aacklgfyt5ucqtmkzlwcahf2ims6knx5gt/ykiwcjq2uxfne/9djc6dthnjw7wjkxsklkbw33dh0uej4z/tsaqdazz1i2aka/yxsmfzzhaqc4rvrub8nyjpz4bbcx1x0bai8sde8fs9m+ami/ykefrs7smcihrbq6pojzhwrvfnl6cir4wrkinx1fykvehzxom8fou9xkgkmetpvyk/5vrouhbrkomtebczd8gv+x2n8oir4pbqsciaf0zbglytne0yals6mztwi8w/utnvbfp7exbsxm0hygmyqeogptsejtp5xvwunbpilm9c94mgvbvz4jhyreft5k8jcg6qxvqafupcev/qlfxxhpika01+lqtkf09ranpr7f+dobdrbunhdaynnzm81c60r4hfi3zmcm6rioaxb/bgnesjmihek5fzul3wgxmfnzzwzgmoykexqqftsb4wfb6yjqwa0caz26idtizjcuxi6dqd8nfagy7kohc6h9u8qkkyumxfifbjnmxrx99rfbbh2yzawokzanftbsvf/ymynxnzgxbpoz49zufjqpzwqajpp+ycwy+grkmiay9oi2auebwjr8elwusa3vn6t1vv/cqxzluh2j7xr3ubuoti5lkwu5s28ynzr7g7eahsa+wvqya4sw1adhxzysghklk6sm/u5ulzjc5yybywzvxntaobipxvs3hn1a6moh/gpzpzisok8stgaryulneslgerlkni7skq7welcig0z/3uobqwewitnzjispz95phsl3jugku9nosljyrhsud9det7ogiskrayavlevbc70pwfm5zcq4h/owy5ni9s+rdv7xjiaeuwaaaabjru5erkjggg==" height="40"/></svg> </a> <a href="/" class="page-header__logo-link"> <img src="img/logo_mobile.png" id="mobile-logo"> </a> <a href="" class="main-nav__toggle"> </a> </div> <div class="page-header__nav-wrap"> <nav class="main-nav"> <ul class="main-nav__list"> <li class="main-nav__items main-nav__item--active"><a href="#">Главная</a></li> <li class="main-nav__items"><a href="#">Фотографии</a></li> <li class="main-nav__items"><a href="#">Конкурс</a></li> <li class="main-nav__items"><a href="#">Блог</a></li> </ul> <a href="#" class="main-nav__toggle main-nav__toggle--close"></a> </nav> </div> </header> and here part of css:
.main-nav, .promo-download__button, .price-table__headers, .phone__text, .mail-text, .map-block__text { font-family: "open sans"; } *, *:before, *:after { box-sizing: inherit; } body { min-width: 700px; font-family: "open sans"; background-image: url("../img/background.jpg.jpg"); background-repeat: no-repeat; margin: 0; } .page-header { position: relative; width: 100%; height: 114px; display: flex; justify-content: space-between; background-color: rgba(30, 39, 50, 0.63); } .page-header #mobile-logo { display: none; } .page-header__nav-wrap { position: relative; } .page-header img { margin-left: 40px; margin-top: 34px; } #logotype-white-tablet { transform: translatex(39px) translatey(32px); } .page-header::after { content: ""; background-repeat: no-repeat; background-image: url('icons/icons.svg'); background-position: 0 -2001px; width: 59px; height: 24px; margin-top: 46px; margin-right: 40px; } .main-nav { display: flex; display: none; position: absolute; top: 114px; left: -431px; width: 100%; height: 255px; background-color: #283645; text-transform: uppercase; font-weight: bold; font-size: 18px; line-height: 32px; } .main-nav__items { list-style-type: none; flex-grow: 1; } .main-nav__items { color: #ffffff; text-decoration: none; display: block; margin-top: 14px; } .main-nav__items::before { background-color: #283645; } .main-nav__toggle--close { position: absolute; top: 0; font-size: 0; border: 0; cursor: pointer; width: 22px; height: 22px; top: -66px; left: 637px; } .main-nav__toggle { position: absolute; font-size: 0; border: 0; cursor: pointer; width: 47px; height: 31px; display: block; left: 601px; top: 43px; } .main-nav__toggle--close::before, .main-nav__toggle--close::after { content: ""; position: absolute; width: 26px; height: 5px; background-color: #ffffff; border-radius: 1px; } .main-nav__toggle::before { transform: rotate(226deg); } .main-nav__toggle::after { transform: rotate(136deg); } .main-nav__list { display: flex; flex-direction: column; align-items: center; flex-wrap: wrap; justify-content: space--around; background-color: #1e2732; margin: 0 auto; width: 100%; } .main-nav__list li { flex-grow: 1; flex-shrink: 1; margin-top: 2px; background-color: #283645; text-align: center; width: 107%; box-shadow: 0 0 2px #050505; } @media screen , (max-width: 320px) { html, body { margin: 0; padding: 0; } body { background-image: url("../img/background-mobile.jpg"); } .page-header { width: 100%; height: 66px; position: relative; z-index: 2; box-sizing: border-box; } #mobile-logo { display: block !important; position: absolute; top: -9px; left: -15px; z-index: 1; } #logotype-white-tablet { display: none; } .promo-download__title { display: none; } .os-nav { display: none; } .os-nav__title { display: none; } } when resize window 320px (or using chrome toggle-device mode , set iphone) @media query works seems viewport doesn't. still can see horizontal scrollbar , parts of "big" header 700px width. have read , tried of decisions such as:
adding meta tags (one one) in question , others relative problem: my meta viewport doesn't work
adding specific width:
<meta name="viewport" content="width=320px, initial-scale=1.0">
or maybe viewport not main problem , have made wrong in css grid construction?
instead of fixing html body min-width: 700px;, use percentages width. media query rule content="width=device-width, initial-scale=1" not have effect if forcibly set page width:
for example:
body { min-width: 75%; } you can use variety of css frameworks, handle of (and many other) problems, i.e. bootstrap 3, zurb foundation, etc.
Comments
Post a Comment