A webpage is not full screen in the browser, but is full screen on the mobile phone_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:38:31
Original
1237 people have browsed it

How to make a web page not full screen in the browser but full screen on the mobile phone








< title>










  • Marriage and Family




  • Traffic accident

  • < ;img src="img/a4.png">
    Medical disputes


  • Criminal Defense


  • Labor and Personnel


  • Corporate Affairs
  • < ;br /> More





< /html>


Reply to discussion (solution)

Take a look at media query. It’s quite simple, but it’s troublesome. You can refer to the following:

@media only screen and (max-width: 959px) {    .top-fix .menu-control {position: absolute; top: 13px; right: 18px; display: block; text-align: center; }    .top-fix .menu-control a {display: block; border: none; padding: 0; background-color: transparent; cursor: pointer; width: 21px; height: 20px; color: rgba(0, 0, 0, 0); line-height: 200px; overflow: hidden; background-image: url(../images/menu_control.png); background-repeat: no-repeat; }    .top-fix .menu-control-h a {background-image: url(../images/menu_control_h.png); }    .header {display: none; position: absolute; top: 50px; left: 0; background: #333; padding-top: 12px; }    .menu-menumain {margin: 0; }    .menu-menumain .menumain-item {margin: 0; width: 100%; border-bottom: 1px solid #444; }    .menu-menumain .menumain-item a {text-align: left; display: inline-block; margin-left: 20px; }    .menumain-item .sub-indicator{display: none; }    .sub-menu {display: block; position: static; overflow: hidden; background-color: #212121; padding-left: 48px; }    .sub-menu .submenu-item {float: left; }    .top-fix .container .top-fix-wrap {position: relative; margin: 0 auto; }    .top-fix .header,     .top-fix .container {width: 100%!important; }}@media only screen and (max-width: 959px) and (min-width: 630px) {    .top-fix .container .top-fix-wrap {width: 650px!important; }    .container, .list-wrap { width: 630px; } }@media only screen and (max-width: 629px) and (min-width: 479px) {    .container, #homecontent {width: 385px; }    .container .one-third.column,    .container .one-third.column .post {width: 385px; }    .one-third a img.attachment-thumbnail {margin-left: 0; }}@media only screen and (max-width: 479px) and (min-width: 385px) {    .container, #homecontent {width: 100%; }    .container .one-third.column,     .container .one-third.column .post {width: 100%; }    /*.one-third a img.attachment-thumbnail {height: 220px; width: 100%; margin-left: 0; }*/    .one-third  .img-wrap { display: block; height: 220px; overflow: hidden;}    .one-third a img.attachment-thumbnail {height: auto; width: 100%; margin-left: 0; }}@media only screen and (max-width: 384px) {    .container, #homecontent {width: 100%; }    .container .one-third.column,     .container .one-third.column .post {margin-right: 0; width: 100%; }    #homecontent .img-wrap {display: block; width: 100%; overflow: hidden; }    .one-third a img.attachment-thumbnail {margin-left: 0; }}
Copy after login

You can refer to bootstrap. Website www.bootcss.com

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template