Search jQuery

jQuery Forum

JQM page width: android vs ios safari

in jQuery Mobile • 8 years ago

I just built a mobile site for my company. Everything works great on all desktop browsers and android platforms 2.2 and higher. Depending on the width of the screen, the page adjusts accordingly so that the content is as readable as possible. On iphone though, 3, 4 and 4s, it acts like the page is 1024px in width and you have to zoom in for it to be usable. Is there a setting that I am missing inside of JQM in my source code or am I just stuck with it being as it is?

Regards,
Clint

Replies(6)

haga0054

Re: JQM page width: android vs ios safari

8 years ago

Do you have a meta tag similar to this?

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

This starts the scale at 1 and limits it to 1 meaning your page will always be seen at 100% and users will not be able to zoom in/zoom out. Of course you can change this to whatever you would like. I would at least add an initial-scale of 1.

clint6998

Re: JQM page width: android vs ios safari

8 years ago

Perfect! Thank you! Still new to the whole JQM thing... now how do I get my site to redirect to my sub domain with my mobile site? I have tried many things and nothing seems to work.

Thanks again,

Clint

greymatte..

Re: JQM page width: android vs ios safari

8 years ago

Here's some handy code that might help:

winhigh = $.mobile.getScreenHeight();
headhigh = $('[data-role="header"]').first().outerHeight();
winhigh = winhigh - headhigh - 30;

In line 1, winhigh is set to the available visible screen height, minus any space taken up by any browser chrome.

In line 2, headhigh is set to the total height of the page's header. If you have a footer, you'll want to get it's height in the same way.

In line 3, winhigh is adjusted by subtracting the height of the header (you'll also want to subtract the height of the footer if you have one). The "-30" is to account for the 15-pixel padding at the top and bottom of the screen.

After this, the winhigh variable will contain the total visible space of the content area in pixels that you can use.

Width is even simpler: