How to detect mobile notch? - javascript

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);

Related

ASP.net 3.5 converting existing website to responsive design

i have got an existing website developed using asp.net 3.5. business requirement is such that it needs be accessed through mobile devices mainly and mostly tablets.
is there any way i can achieve that without converting the entire website to mvc4 or re writing the front end code?
Try setting the viewport meta tag to at least scale the site on mobile devices, like so:
<meta name="viewport" content="width=device-width, initial-scale=1">
But really, its impossible to make a site fully responsive and mobile friendly without changing the front-end.
Bootstrap's grid system is a quick and fairly easy way to get started with a responsive design. It is a 12-column fluid grid layout that stacks or expands as the screen size or device width changes, and comes with 4 preset widths to help you distinguish among mobile devices, tablets and desktops. You will have to restructure the front end to fit into the grid template, but this shouldn't require a total re-write.
Check out the docs and examples here: http://getbootstrap.com/css/#grid

Web site causing browser to find the "wrong" screen width

I have mobile optimised several sites in the same way using media queries - most are working fine on phones but two insist on always detecting a screen.width of 800px, no matter how small the actual device is.
Working correctly:
www.accountex.co.uk, www.legalex.co.uk, www.takeawayexpo.co.uk, www.streetfoodlive.co.uk
Detecting wrong screen size but only on mobile devices:
www.greatbritishbusinessshow.co.uk, www.bstartup.com
Even though the methods used are almost identical. The above two show correctly on all online mobile simulators, BUT use the media query for a screen width of 800px when loaded on actual mobile devices even when the device is 320x480 or otherwise very small.
Using console.log or alert these two sites always return 800px as the when alert(screen.width) is invoked - no idea how this can happen on a tiny device!
Thanks for your help!
use this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">

iPad orientation issue on a web page

I developed a web page for PC and I wanted it to be compatible for iPad as well. However I did not do specific additions to my page for iPad compatibility. I only added the meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1;" />
When I view the site in iPad landscape mode, on the page load, it looks good. But when I switch to Portrait mode, the page looks cut off. When I switch again to landscape mode, the page looks cut off still further.
What other practices should I follow to make my page iPad compatible.I'm looking for recommendations/best practices on using %widths and things like that.My elements are currently of maximum 954px. Should I necessarily use % widths for iPad compatability? Any other helpful tips?
initial-scale=1.0 means your page will load 'full size' which is too wide in landscape mode. If you use that meta tag, you would usually use it in combination of sizing the page width to the exact dimensions of the screen. Since you are not, I would not use that meta tag at all and let the iPad's browser load the page normally (the browser will handle fitting it to the screen for you).

iPhone viewport confusion / window.innerHeight

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.

Best way of dynamically scaling a page?

I was wondering what you guys and gals would recommend as the most efficient want to dynamically rescale a website based on resolution?
Is there anything that rescales elements AND images?
Or do I need to do those separately?
I've been trying to use percentages and em's, but it seems like a huge hassle. Are there any scripts?
I've been searching for quite a while and haven't found anything that quite fits yet.
New Media Queries are landed in CSS3 specification. You can read an awesome article on the subject from A List Apart Magazine (with example, try resizing your browser window)
There are also existing scripts of course.
The best way to detect the orientation of the device is by using meta tags. The viewport meta tag is used by Safari/chrome on the iPhone and iPad to determine how to display a web page. Following are the properties of the viewport
The viewport width to the width of the device by adding the following declaration to the head of your HTML file
<meta name="viewport" content="width=device-width">
To set the initial scale to 1.0, add this to the head of your HTML file:
<meta name="viewport" content="initial-scale=1.0">
To set the initial scale and to turn off user scaling, add this to the head of your HTML file:
Utilize the viewport meta tag to improve the presentation of your mobile browser. This meta tag sets the width and initial scale of the viewport. Add the appropriate viewport meta data to the head of the document to instruct the browser to present your content in as large a context as possible on the device’s screen. If you don’t set the viewport width, the page will be zoomed way out when it first loads.
Full Screen Mode
<meta name="apple-mobile-web-app-capable" content="yes">
If content is set to yes the web application runs in full-screen mode; otherwise, it does not. You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.

Categories