iPad orientation issue on a web page - javascript

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

Related

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

webkitRequestFullscreen() changing viewport / dimensions of webpage on chrome on android

For an application, I need to send chrome on android into full-screen mode.
I know that I need to use the Fullscreen API, which involves calling Element.webkitRequestFullscreen().
So, I call this on document.body as I want everything to be put into fullscreen mode and take advantage of all the phone screen.
However the problem is that the screen is resized/loses quality. This severely mucks up my application (which is drawing to a canvas for virtual reality) because I need all the resolution I can get!
To demonstrate the screen has been enlarged and lost drawable pixels, see this from the console of inspecting my phone:
window.innerWidth
980
window.innerHeight
1547
//now I enter full screen...
window.innerWidth
360
window.innerHeight
640
Clearly, innerWidth and innerHeight are being reduced by something when entering fullscreen, but I can't figure out what.
I have tried different resizing of the canvas which is contained in the body but to no avail.
But what I thought would be the solution would be to add a viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">
and I also tried setting a definitive content width:
<meta name="viewport" content="width=900, initial-scale=1">
but neither of these seemed to have any effect on the behaviour of the webpage, so I am not sure if I am placing them wrong (in the <head>) or if I have the syntax wrong, but they don't change anything.
The solution (more of a workaround) was to turn my website, that I was opening in Chrome on my phone, into a Progressive Web App.
This is as simple as writing a short manifest.json file in the root directory then once the website is open in Chrome, tapping on "Add to Home Screen".
Now the manifest.json file has an option: display: fullscreen.
This does not reduce the working space resolution and was just the fix I needed.
Furthermore, considering my goal of a VR experience, it makes more sense for this to be a web app than a website that you have to fuss around with in Chrome.

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">

Redirect to mobile page when width is too small

Since my website doesn't look good at all on a small screen, I want to create a JS function that redirects me to a mobile version of the page when width of the screen is smaller than or equal to 800px.
Here is the code for it:
if (screen.width <= 800) {
document.location ="index_mobile.html";
};
If the code works, then when I shrink down the browser window to 800px wide, the index_mobile.html should show up. But it is not showing up right now. Does anyone know what's going on?
http://jsfiddle.net/RZMmV/
Mobile browsers do not report or use the real device resolution because this would make basically all websites on the internet unusable.
What they do is creating a "virtual screen" that has a resolution that is closer to the resolution of a desktop PC and then will implement zooming on the page.
If you want to know the real device resolution you need to disable automatic scaling done on the device. For example for iOS and Android devices this can be done adding
<meta name="viewport"
content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
to the <head> section of your page. This informs the browser that the page has been designed for handling low-resolution devices and disables the virtual screen layer.
screen.width will return the width of the monitor, not the window, so you can't just shrink your browser window down to get a different value. To do that, you'll want to use window.outerWidth or something.

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