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">
Related
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 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?
When I load Kickstarter.com on my iPhone, it loads like this
But when I load the site I created, it loads like this
As you can see, for KickStarter, it zoomed all the way out upon load.
For my site, it doesn't zoom all the way out. It is zoomed in to the top left hand corner of my site.
Does anyone know why this is happening? How do I make my site to have same behavior as seen on KickStarter?
thanks
Have you set the proper scaling tags in your HTML file?
You need to have this at the top of your HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Assuming this isn't a responsive design, you need to add viewport meta tags to your page
<meta name="viewport" content="width=1024">
change 1024 to whatever your page width is optimized for
Try adding:
<meta name="viewport" content="width=device-width, initial-scale=1">
in your header of the site. The "device-width" will fit the screen to the devices width.
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 assume this has to do with the retina display and thus everything is twice as small as it should be on the iPhone.
This is the site I'm working on: http://share-the-secret.com/
If you resize the site horizontally to two grid block, that's how it is supposed to look on the iPhone. Currently on the iPhone you see the four grid layout.
I do not want to use media queries to give a custom size for all the elements on the iPhone.
Is there an easier fix for this?
Thanks!
Found the solution!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">