I have a section of my website that should be hidden when a user scrolls like:
$( window ).scroll(function() {
$('header').addClass('colapsed');
});
The viewport is set to prevent scaling like:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
But whenever the orientation changes on iOS my on scroll callback is being called. Any idea how to overcome this?
PS: It works fine on Android
Keep track of the most recent orientation change. In your scroll callback, check if the current orientation matches the previous orientation; if it doesn't match, you know it's an orientation change so you can ignore it.
Related
I have a div set to width: 100%. When I load it initially in the portrait view of the iphone the element width is picking up at 480px.
The odd thing about this is that when I console log the width at load I am getting 320px. Also, if I manually change the orientation to landscape and then back to portrait then the element is getting the correct sizing.
I have tried a handful of suggestions to the meta viewport tag, but nothing seems to be working. Here is the current tag info:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1, minimal-ui">
Also, when I change the zoom after initial load, then the element gets the correct sizing.
Any suggestions on how I can get the right size at initial load?
I was going to delete this post, but since someone upvoted it I figured I would provide the answer. The issue was that this element had position: fixed. I simply added position: absolute for the media query on mobile and it is now functioning properly. :)
I have one issue regarding ipad design i use one slider in to that when i turns mode portrate to landscape then it is not taking width of landscape
It takes width of Portrate mode and we have to reload the site to see perfect in to landscape mode i don`t want to reload site can anyone help me out form this issue
Use proper meta tags in your header. Try this.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I'm trying to recompile an app for iOS 7, since nothing of the old one works so far.
One of the many problems is that I'm using some inputs inside UIWebViews. Text inputs, pickers etc.
Now, when the iOS 7 shining white keyboard appears, all the bottom fixed elements in the webpage (such as, confirm buttons) are scrolled upward, as if the 'top' of the virtual keyboard is the new bottom of my UIWebView. This is a substantially different behavior from iOS6.x
Is there any magic trick to make the virtual keyboard behavior work like it used to, without injecting JS/CSS to the webView?
This fixed the problem for my cordova app. I'm not sure if it applies to you but just in case.
Check your html meta tags for something like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
Replace it with this:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
In our case this would fix itself as soon as user scrolls. So this is the fix we've been using to simulate a scroll on blur on any input or textarea:
$(document).on('blur', 'input, textarea', function () {
setTimeout(function () {
window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
}, 0);
});
I ran across exactly the same problem & gave up after two days of experimenting. It seems that:
a) all bottom-fixed elements go upwards so that their bottom offset is relative to the top edge of the keyboard
c) all top-fixed elements stay in their original position (do not move upwards as they used to) - note that top-absolute elements work ok.
The only solution I found was to have a custom iPad stylesheet that replaces all fixed elements with absolute elements, sets the css bottom property to auto and uses top instead
Opposum, your solution worked for me but only when the scale was set to 1.0. If I set it to 0.9 then it would be like it was before your suggested fix. I set initial-scale, maximum-scale, and minimum-scale to 0.9 and the bouncing effect of the fixed objects when the keyboard appeared was still happening.
I have set the following viewport tag in html file using UIWebView.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
Now, when user piches out, I get this effect as shown in the image.
I want to disable this effect but still have the ability to zoom in.
Tried by setting UIWebView's bounce to NO, but still this problem persists.
Thanks.
You can do it by using bouncesZoom property of UIScrollView(property of UIWebView) as below-
[webView.scrollView setBouncesZoom:NO];
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