I am facing a problem in mobile view (iPhone) of my website: http://www.html5css3tuts.com/turkey
When I open this in iPhone, scrolling the website is very hard. It gets sticky when we scroll up. It's working very well in other mobiles even in the iPad also. I am not able to find where it's getting problem.
Use tag in the page for mobile resolution:
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
I have tried to make this website responive: http://www.minicampingdevlegel.nl
It works great in Google Chrome, but when I loop on my iPad Air and iPhone 6s it looks very small.
Is there a problem with my viewport settings?
Could try adding the following viewport tag in the tag...
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
I hope this helps...
I'm having a very strange error while I'm making my bootstrap 3 website: for some reason it is not adapting to the smaller iPhone screen size (the navbar is not collapsing, and the "col-xs-..." seems to be getting ignored).
I have double checked the screen width on the iPhone (it's 320px), and my website is adapting fine on my desktop at 767px when I resize the browser. Only the iPhone seems to be giving me problems and I don't know how to diagnose the problem.
You can see the website at www.sparkmyinterest.com
Thanks for your ideas!
You don't have the meta viewport in your dom-head.
<meta name="viewport" content="width=device-width, initial-scale=1" />
I've been implementing Infinite-Scroll by Paul Irish on my site. It works on desktop browsers, but on mobile (iPhone specifically) it doesn't straight away. The work around is zooming in slightly, that makes the scroll event fire which triggers infinite scroll.
Also see the issue report here:
https://github.com/paulirish/infinite-scroll/issues/3
My question is: is there a solution for this?
I've noticed Tumblr makes infinite-scroll work without a workaround.
If you were to check http://youworkit.tumblr.com/ on iPhone, then switch from the mobile to the standard desktop view, infinite-scroll does work without zooming in.
Any thoughts?
This works for me:
JQuery Detect Scroll at Bottom
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
When I change the orientation of my iPad from the portrait to landscape mode my page looks zoomed.
Currently I am using this meta tag in my site
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0;">
This allows me to zoom my site on iPad and iPhone but has the zooming problem in orientation.
So I tried using the below mentioned meta tag, here I am not getting the orientation problem but not able to zoom my site.
<meta name="viewport" content="width=device-width, user-scalable=1.0, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0;">
And I tried all the things which are mentioned in the link. Nothing is working for me.
This is a Mobile Safari bug. It was a broadly known issue and has been corrected in iOS 6. Use your previous meta-tag and you should be good now.
http://filamentgroup.com/examples/iosScaleBug/
Also, I strongly advise against using maximum-scale=1.0, specially for tablets. This is bad for accessibility, and, quite frankly, an annoying feature.
I am designing a mobile website and when I see my website in portrait view on iphone/ipod its layout, images everything is perfect but when I change to landscape view everything is showing a little bit zoomed-in. I have tried all the meta tag (viewport) attributes:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=1" />
What am I missing? I want to continue to allow users to zoom, I just don't want the orientation change to zoom my content in.
The guys behind jQuery Mobile have a solution to this. It works by checking the accelerometer data and disabling zoom while the device is changing orientation.