I am trying to develop an app that works on the Kindle Paperwhite "experimental" browser. I would like to prevent the browser from scaling because I have designed my app to fit the screen perfectly.
I tried using:
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no" />
But the browser seems to ignore the declaration.
There are two ways I find scaling happens: (1) when the user click on a text box. The whole screen is scaled up to make the textbox large. (2) when the user zooms the screen by pinching.
I tried hooking into touch events with the idea of cancelling them. But they are not fired.
Is there any other event I can use?
Related
Seems to me a lot of solutions from making the text 16px or using js to check if the phone is an iphone. Changing the style is not ideal and checking if it's an iphone seems a bit messy and over time more devices/browsers may have this behaviour.
Is there a simple rule that just prevents that default behaviour entirely no matter the device?
You can disallow your website to scale. That is if your page is properly designed for phones though. Otherwise, I would not recommend using this solution.
To prevent your mobile page or form fields to float around add or set the following viewport in your <head></head> to:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
I have been using the meta tag for viewport, like Apple says on their own developer page, now for years on my responsive designs. As of recently my iPhone is now able to zoom in even with the following
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width;" />
<meta name="HandheldFriendly" content="true" />
The initial page loads to the correct size, but the users can now zoom in closer and the viewport isn't working. I was wondering if there is a way to disable to pinch to zoom using jQuery? Since I am already using some on my page it would be easy to implement.
Please note: Even on other websites like davidwalsh.name/demo/mobile-viewport.php that used to work it can now zoom in. I imagine this is part of the change with html5 released in December that disallows the maximum-scale attribute in meta tags but I cannot be sure. I have been using noBounce.js on page up until now that disabled all the iOS bounce and zoom capabilities but I am not sure which part is controling the zoom to steal that bit out of it and I don't use noBounce anymore on most apps for other reasons.
As of iOS 10, the mobile Safari browser will ignore user-scalable=no and will allow pinch and zoom on every website to improve accessibility.
From the iOS 10 changelog:
To improve the accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.
It looks like we will have to start designing sites with pinch and zoom in mind, at least for Apple devices.
I came up on the iOS10 Pinch-to-Zoom problem, i could fix this issue with a manipulation inside of the head-tag to the PortableWebApp(Cordova).
What i did was just to add this line in my init() from app.js
$('head').append('<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width;" />');
The App is now Scrollable, adapts to different screen sizes/devices and no more Pinch-to-Zoom.
Note: remember this only works for Hybrid Apps, Safari is not affected by this workaround.
I am using Foundation for a responsive website and have a problem with SOME mobile devices not properly scaling the viewport ONLY when you load another page via our ng-include. This loads new content into the page and the width of the page then breaks and requires horizontal scrolling.
This doesn't happen in certain devices such as Galaxy Note 3/4, but does happen in devices with identical resolutions, such as iPhone 6 Plus. I do have a viewport attribute and scaling set:
<meta name="viewport" content="width=device-width, initial-scale=1, target-densityDpi=device-dpi;">
Any help figuring out why this doesn't scale properly when I load new dynamic content for this single page application is greatly appreciated. I'm not sure if it's related (just thought of it), but we also use document equalizer reflow often:
$(document).foundation('equalizer','reflow');
I needed to add a min and max scale. Although I didn't test it, I imagine I just needed to add a max scale, as the content was flowing off the screen.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
I am working on phonegap/cordova app. Created few pages in html5, but i can't get them to be across whole screen regardless of the size of the screen. I tried with javascript. Added this script to be activated on load:
function SetupPage(){
document.getElementsById("container").style.width=window.innerWidth;
document.getElementsById("container").style.height=window.innerHeight;
}
But it still has the size of content within it, and i need it to stretch everything depending on the screen size. How can this be done?
set your meta viewport scale
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
You should be able to use CSS after that to size how you need.
I added view port meta attribute as follows:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
Usually, it works well, but the problem occurs when I use margin-left and thus move the absolute main view to the right, outside of the device view. In this case, when double-tapped, the view becomes zoomed out to contain the whole contents (including the part that is moved outside of the device view).
I don't understand why the view port meta attribute doesn't apply to this case.
Can someone answer this?
I had a similar issue with a site I was developing. I solved the issue using overflow:hidden on the body for small screen sizes. You may also want to try to use padding instead of margin and mark those elements box-sizing:border-box. Give it a shot and also post your code so I can get a better idea!
All the best,
Shalom