Really hoping you can help me with this strange bug. Ever since updating my phone to iOS 9 my website: https://verweij-juristen.nl seems to be locked. When people visit my site they can't navigate. Also the footer crosses wright through my mobile slider. Even when I turn slider off it still shows and the website still hangs.
It's only on iOS 9 :(
Looking forward to any input :) I'm desperate lol.
iOS9 messes up with the viewport meta, you have to tell it to scale your site maximum at initial scale which should be 1.0
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,shrink-to-fit=no"/>
This is a meta configuration that works with iOS9
Related
Perhaps similar to this question, although not related to rotation:
unintended zoom on orientation change in PWA but not mobile safari iOS
I have an issue where if my PWA app is left running (say, on an iPad as a Kiosk) and the device sleeps / locks, upon unlocking / waking the app decides to zoom-in to a section in the middle of the page. It's not even a smooth zoom-in, it's like a badly animated 90s JPG loading checkerboard sequence as it 'switches' from one zoom level to another.
I've tried HTML meta tags:
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, maximum-scale=1.0, user-scalable=no">
I've tried CSS touch-action:
touch-action: none;
But nothing seems to stop it. Interestingly, with the app running in the Mobile Safari browser and not as a PWA, the issue does not occur.
Hi,
I have this viewport:
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=1">
and this page width:
html, body {width:100%;min-width:1180px;}
It looks fine on a computer screen. However, if I see it on an iPhone 4 it looks choppy on the right side. So it is necessary to scroll right in order to see the missing part. I dont want that. The whole page should fit inside the screen but it wont unless I reduce the width to 1100px or less but I need it at 1180px.
What is wrong here?
Thank you.
I'm fairly new to coding, but a little while ago I read an article that said you can check which iPhone the user of your app has. This way you can use an if-statement to make the width depending on the device. Maybe google a bit further on "check iOS device programmaticly"? Hope that this did help you in some way!
My site used to work in full screen when I created a Web App for it, however lately it doesn't show in full screen anymore. Is there something that has changed with the new iOS version or a new Safari version?
I still have the meta tag : <meta name="apple-mobile-web-app-capable" content="yes">
Just to confirm, I am refreshing the website and adding the bookmark to the home screen. I can't seem to figure out what has changed.
Thanks
RF
This is a subject that gives us a lot of problems whenever IOS is updated. So now iOS 9 is here we have once again been searching for answers. I am happy to say we have found a fix and it may well work for you too.
For iOS 8 we found that adding the following meta tag
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimal-ui">
... and scrolling the page about a bit and back to the top using JS would do the trick - which no longer works with iOS9
window.scrollTo(0, 1);
window.scrollTo(0, 200);
setTimeout(function() {
window.scrollTo(0, 1);
}, 100);
But, what we have now found is that changing the meta tag slightly has once again rectified the problem (notice the scale):
<meta name="viewport" content="width=device-width,initial-scale=1.01,minimal-ui">
I am developing a mobile web site using Sencha Touch. In iOS7 Safari I cannot make the top address bar & the toolbar below go away. Sencha used to handle this upto iOS6 but some recent changes in iOS7 is causing this issue.
http://java.dzone.com/articles/safari-ios-7-and-html5
I read the above link & it seems this is also an issue for HTML5 Games & a few other apps.
The old window.scrollTo() which worked for iOS6 no longer works.
Add minimal-ui in your meta tag viewport, this will hide he address bar and browser controls in safari iOS7:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
More info on iOS7 and fullscreen mode for mobile websites: http://blog.initlabs.com/post/81716286465/how-to-display-websites-in-fullscreen-mode-in-ios7
With iOS 7 I don't think you really have a choice. Obviously Apple doesn't want developers doing this anymore, and even if someone finds another workaround it probably won't stick around for that long.
Honestly, I think getting fullscreen functionality is a fair trade off for users to install the app to their home screen. Obviously there are certain cases where this isn't true, but I guess I find it understandable to some degree. You should still be able to add the following meta tag and it will be fullscreen once added to home screen:
<meta name="apple-mobile-web-app-capable" content="yes">
There are a few nice libraries out there that add an "add to homescreen" prompt that you can set up to be rather unobtrusive with custom messages. In this case, might be best to embrace the change...
i have a mobile website for iphone and ipad where i disable user zooming with
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
this works fine as long as the site is in landscape mode. the width of the website is exactly the width of the screen.
then if i rotate the device into portrait mode it gets scaled down so that it fits the new (shorter) width. this is also ok.
but then if i rotate it back to landscape mode it is suddenly scaled to about 125% that means horizontal scrolling is now possible and zooming is not possible since initially disabled.
how can i make it back at 100% zoom when rotated back to landscape?
thanks!
try experimenting with maximum-scale and minimum-scale like so
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" />
and see if you can achieve what you are looking for..
Disabling zoom is a bad idea. It's not a perfect solution, but targeting webkit's scaling of font size on orientation change can help minimize the problem. You would leave the head of the document with:
<meta name="viewport" content="width=device-width, initial-scale=1">
Then you would address the font-size scaling in your CSS like this:
body {
font-size: 1.5rem;
line-height: 2.3rem;
-webkit-text-size-adjust: 100%;
}
/* This prevents mobile Safari from freely adjusting font-size */**
Using the maximum-scale and minimum-scaleto stop zooming don't really work because then you take away the user's ability to zoom. That's really a bad idea because it makes your users with bad eyes angry that your website doesn't zoom, while other websites do...
I tried timeouts and all kinds of fancy javascript, then I found this:
https://github.com/scottjehl/iOS-Orientationchange-Fix
via this related question: How do I reset the scale/zoom of a web app on an orientation change on the iPhone?
On that post, Andrew Ashbacher posted a link to the code written by Scott Jehl:
/*! A fix for the iOS orientationchange zoom bug. Script by #scottjehl, rebound by #wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);
That is a solution wrapped nicely in an IIFE so you don't have to worry about name-space issues.
Just drop it in to your script (not into document.ready() if you're using jQuery) and viola!
All it does is disable zoom on devicemotion events that indicate that orientationchange is imminent. It's the best solution I've seen because it actually works and doesn't disable zoom.
EDIT: this approach is not always reliable, especially when you are holding the ipad at an angle. also, i don't think this event is available to gen 1 ipads