iPhone viewport confusion / window.innerHeight - javascript

I'm having trouble fitting a site to the iphone's screen dimensions.
What I am doing is the following: I have a slideshow with a few pictures running fullscreen in the back of the page and and little text on top.
When I set up the slideshow I do the following:
$('#bg').css('width', window.innerHeight).css('height', window.innerWidth);
Then I insert the Slideshow and scale and crop the pictures accordingly. This works perfectly fine in all desktop based browsers. Yet, the iPhone does not return its actual screen size but a value of 5000 so I get a rather big slideshow. The rest of the layout seems to render perfectly fine according to the given CSS.
I do know about the viewport "thing" with the iPhone and have already read this: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html which led me to inserting the following meta-tag:
<meta name="viewport" content = "user-scalable=no, initial-scale=1" />
Yet again, this does not make any difference, the iPhone will still return a dimension of 5000px.
Anyone can tell me what I am doing wrong? Thanks a lot!

Ok, so what did the trick for me was using this combination of meta-tags:
<meta name="viewport" content="user-scalable=no, width=device-width" />

Try width=device-width in the meta tag - and make sure you dont have any other elements that are 5000px wide.

Related

I want to load the page in mobile as in desktop, but it has too much zoom

So i got a client that wants the site to look on mobile exactly like on desktop (small text and all). the issue im encountering is that the site zooms on mobile so i figured im doing something wrong.
i used this code:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.5, minimum-scale=0.1, maximum-scale=1.0">
with this it loads it zoomed, if i change the initial scale to 0.1 i get white bars around the content and the text gets enlarged.
any idea how to achieve it properly? JS or something?
thank you.
You have to use media query to make your site mobile-responsive and you only need to add this code in your <meta> tags.
<meta name="viewport" content="with=device-width, initial-scale=1.0">
You can use media query like this. In here 500px is based on mobile device width, It means all css properties in media query will run if your device width is below 500px. Otherwise it will load default css properties which you wrote earlier in the document.
#media all and (max-width: 500px) {
/*Your
Changing
CSS
Properties*/
}
You can learn more about media query in this article.

How to detect mobile notch?

I have a web app like my image 1 below, everything looks good. The problem is that when the app is launched on a mobile that has a notch, it creates a layout problem, as you can see in image 2. And I can not use a "safe area" because some of my pages need to be stuck on top, like the image 3.
I can easily solve this by adding media queries to add a padding above the content on iPhone X, but the problem is that not only iPhone X have a notch.
Ideally there should be a JS method to detect mobiles with a notch (and return the height of this notch would be even better) But is this possible? If not, what is the better way to deal with this problem? Do I have to create media queries for every smartphone in the world ?
HTML::
meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"
CSS::
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

What is the browser auto-zoom based on and how can I offset using CSS or Javascript?

I've built a web page which displays a grid. On the regular screen (laptop / desktop), the browser is at 100% zoom level and the UI looks fine.
However, when I connect my laptop to a projector, the browser automatically sets the zoom % to 125% and everything is bigger and scroll bars appear everywhere.
I don't understand what this behavior is based off or where it is coming from. Is it due to the resolution change?
Is there a way for me to make sure my UI does not get zoomed when I connect to a large screen?
Thanks
You should be able to avoid scaling on certain screens by setting the viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

How to get the actual viewport of a mobile device that has a meta viewport size?

Most mobile pages are served with meta viewport sizes, e.g.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> Which will simulate 320px on width for iphone backward compatibility reasons...
but when i check via javascript window.screen.availWidth running on and android emulator for example, i get some value like 720, but a 320px image covers the whole screen.
How to i get the actual width being used by the document?
I just tested on my Android emulator, and it returns the wrong value when the page is loaded first time. I used this trick to get the right value.
setTimeout("your javascript function",200);
I executed my function after 200ms and I got the right width and height. I didn't try any other duration than 200ms so you might be able to get the right value in shorter time.
Hope this helps.

Problems stretching background to fit screen on iPhone

I'm using Supersized (http://buildinternet.com/project/supersized/) to stretch a background image to fit the screen.
It works great in desktop browsers and in iPhone in portrait mode, but in iPhone landscape, the text overflows the screen, and also the image, which does not stretch to the bottow below the initial "view".
Any suggestions?
I'v tried CSS3 background-size with the same results.
Demo:
http://www.retype.se/temp/holding/
Add this to your <head>
<meta name="viewport" content="user-scalable=no, width=device-width" />
You can play around with the attributes a bit to get your desired behavior. More information on this tag can be found here:
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

Categories