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...
Related
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">
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 have a horizontal site and I want the site to always be 100% in height when viewed on a mobile device. I have set the viewport meta tag to -
<meta name="viewport" content="height=device-height, user-scalable=no">
which works fine on both portrait and landscape mode, however when I rotate the phone from portrait to landscape mode the site scale bigger than 100%. Unless I re-load the page (refresh won't work).
I found this link which explained why it does that - http://filamentgroup.com/examples/iosScaleBug/
and followed the instruction there and changed the meta tag to
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
This solved the orientation problem when switching from portrait to landscape mode but it doesn't scale the site to 100% height.
It's okay to disable the zoom functionality because I prefer to have zoom off.
Any suggestions to solve this problem?
Thanks
I know this is an old question but when trying to achieve what you are I tend to use the following code.
<meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
Hope that helps
I have a strange problem.
I deployed a app designed for the iPhone 4 with Cordova.
But the Viewport is always double scaled, so webkit creates a 1280 * 1920 px view.
I have not idea why this is happening.
I already included
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;"/>
but it's still happening.
Does anyone have an idea how to fix this?
Well I finally found the solution, still it's pretty akward.
In cordova.plist I set Enable viewport scale to yes. But still in the meta viewport I had to do a initial-scale=0.5
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.