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" />
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 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 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.
I have built a website that I thought was free from css errors until I test this on the iPhone. I have a strange problem in that the repeating background images do not stretch fully across the page.
This is what it looks like on an iPhone and full website URL:
Example website
Try this: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
The problem is the same for if you reduce the width of your browser. The problem is the background IS stretching, but the website is only as wide as the stretched background image. The slidey bit below the logo has a fixed width though and is creating the illusion that the background isn't stretching far enough.
The above code should fix this issue by making sure that the website zooms to fit the width of the browser.
Turn off auto-scaling by setting a viewport meta tag to the head section of your HTML. This sets the width of your page to match the width of the display,
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Sadly adding the viewport to set the zoom to 100% was not what I was looking for.
After debugging further I found that the problem was being caused by the large banner image at the top. This was a larger width than the rest of the website, by changing this to a centered background image and adding overflow hidden to the container fixed all issues.