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
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 designed an app on a resolution of 640x960px which I am now converting into a working webapp for an iPhone 4S. As you may know, the iPhone 4s has got a resolution of 640x960px.
Why is it that when I use width=device-width in the meta viewport, which shouldn't downscale or upscale the design, the iphone uses a width of 320px instead of 640 pixels?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
However when I use width=640 it forces the browser to use 640px as the width but that doesn't automatically change the width for other devices such as an iPad. This just doesn't make sense to me.
content="width=device-width"
will not scale up anything.It only changes the viewport's width. It seems the iPad is dumb in such cases as it thinks of width in device-width as 768px in landscape mode too.
In landscape mode setting a specific pixel value for iPad will scale it up 1.333.
Use this and couple it up with responsive layout techniques
<meta name="viewport" content="width=device-width, initial-scale=1">
Also, what you are doing is correct. Just add specific code for layout. Made my life much easier.
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.