All geek questions in one place

JQuery Mobile - Free space when switching orientation

Problem with jQuery Mobile when using iPhone. When I load the page first, it loads normally, but as soon as I switch the orientation, it adds a space to the bottom of the background image.

In orientation style sheets, I have the background image code. Does anyone know how I can “lock in” heights of up to 420px for a portrait and 320px for a landscape?

Thanks.

  <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"><head> <title>Mobile Website</title> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script> <link rel="stylesheet" media="all and (orientation:portrait)" href="css/portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)"href="css/landscape.css"> </head> <body> </body> </html>
+4
source share
2 answers

Take out width=device-width and just use

 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">

EDIT: I had the same problem and used the above. However, I did not have the other css that you have.

EDIT 2: Try this and get rid of 2 different css files and just use one without all and landmarks. Then use the meta view material that I posted. I just tested and it worked for me. He made a full-length background image no matter what orientation I used.

 .ui-page { background: url(images/purple.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
+4
source

Edit:

 all and (orientation:portrait) all and (orientation:landscape)

To:

 all and (max-width: 419px) <--will be used for widths less than 420px all and (min-width: 420px) <--will be used for widths more than or equal to 420px

Here is a tutorial that I used some time ago, there are tons, so if this does not answer all your questions, just keep Googling: http://css-tricks.com/6731-css-media-queries/

0
source

Source: https://habr.com/ru/post/1385966/

More articles:


All Articles