Mobile page self-adapting horizontal screen vertical screen solving method thinking

Before the webapp of the horizontal screen has done some attempts, but always not a good solution, the previous period of time and contact with similar requirements, try to feel better solution.

Previous ways to write blog: Mobile Web page screen compatible with some experience

Here is the example of the usual mobile side of the sliding page, that is, the top and bottom switch page "H5."

The first thing to do is to prepare:

1. HTML Layout

<div id= "wrap" ><div class= "PageWrap" ><div class= "img11" ></div><div class= "img12 animated" ></div></div ><div class= "PageWrap" ></div></div>

2. Then the CSS style:

/*yui 3.18.1 (build F7E7BCB) Copyright Yahoo! Inc. All rights reserved. Licensed under the BSD license.http://yuilibrary.com/license/*/html{color: #000; background: #FFF}body,div,dl,dt,dd, ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0} Table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong, Th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}q:before,q:after{content: '}abbr,acronym{border:0;font-variant:normal}sup{ Vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size: Inherit;font-weight:inherit;*font-size:100%}legend{color: #000} #yui3-css-stamp.cssreset{display:none}img{width: 100%; Display:block;} /* Main CSS */body{width:100%; height:100%; position:relative; left:0; top:0; background: #000; overflow:hidden;} #wrap {Height: 100%; Position:absolute; left:50%; top:50%; Overflow:hidden;}. pagewrap{width:100%; height:100%; position:absolute; overflow:hidden; left:0; top:0;-webkit-transition:all 1s; tran  Sition:all 1s; Transform:translate3d (100%, 0, 0); -webkit-transform:translate3d (100%, 0, 0);}. PageWrap div{Display:none;}. Pagewrap:nth-child (1) {background: #42a8fe URL (http://7xioxc.com1.z0.glb.clouddn.com/bigxm_1_house.jpg) no-repeat Center bottom; Background-size:cover; Transform:translate3d (0, 0, 0); -webkit-transform:translate3d (0, 0, 0);}. Pagewrap:nth-child (1) div{display:block;}. Pagewrap:nth-child (2) {background: #e22143 URL (http://7xioxc.com1.z0.glb.clouddn.com/bigxm_2_bg2.jpg) no-repeat Center bottom; Background-size:cover;} /* P1 */.logo{width:94px; position:absolute; left:50%; Margin-left: -47px; top:23px;}.  img11{width:97px; position:absolute; left:2%; top:10%; }.img12{width:190px; position:absolute; left:50%; Margin-left: -95px; bottom:85px;}. img13{width:100%; position: absolute; left:0; top:0;}

The above style contains reset.css and the style of the page, the main focus is the body style and #wrap,. Pagewrap style. The page is written according to the horizontal screen, when the vertical screen, you need to rotate the page 90 degrees.

--------------------------------------------------------------------------------------------------------------- -------------------

After preparing the above content, the next step is to write our JS implementation.

By JS to get a wide value to determine whether it is vertical or horizontal screen, why should such a child?

Because not all browsers support the orientation method, so I have done this stupid way.

(1) If the width of the browser is greater than the height, the description is horizontal, the width of the canvas = = width of the browser, so wrap does not need to be rotated.

$ (' body '). CSS ({' width ': ww+ ' px ', ' height ': wh+ ' px '}), Wrap.css ({' width ': ww + ' px ', ' height ': wh + ' px ', ' Transform ': ' Translate3d ( -50%,-50%,0) ', '-webkit-transform ': ' Translate3d ( -50%,-50%,0) '});

(2) If the width of the browser is less than the height, the description is vertical, the width of the canvas = = Browser height

$ (' body '). CSS ({' width ': ww+ ' px ', ' height ': wh+ ' px '}), Wrap.css ({' width ': wh + ' px ', ' height ': ww + ' px ', ' Transform ': ' Translate3d ( -50%,-50%,0) rotate (90deg) ', '-webkit-transform ': ' Translate3d ( -50%,-50%,0) rotate (90deg) '});

At this point, you need to rotate the page over.

-------------------------------------------------

In addition to paying attention to this, consider the direction of sliding the page.

Because the direction of the finger slide is not consistent when the horizontal screen and the vertical screen, so the finger swipe event also needs to write two situations.

Complete test code can be downloaded in the Baidu Cloud disk: Http://pan.baidu.com/s/1gdix9QF

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Mobile page self-adapting horizontal screen vertical screen solving method thinking