I'm having some issues with a page that doesn't have a lot of content and therefore has a small height. The iPhone is scaling the page, and due to this, I can't see the full menu bar (960px wide). I put a minimum height using a media query for both portrait mode and mobile devices with a minimum resolution. I really dislike doing this as I don't know how this will work on other devices, and it only works if the user doesn't rotate the screen (after rotation, the original issue re-occurs).
Is there some way to force the iphone to show a minimum width of 960px even if the height of the content doesn't fill the screen?
You can control the viewport width, and maximum scale (depth visitor is allowed to zoom in) for Apple mobile devices with this META tag:
<meta name="viewport" content="width=960px, maximum-scale=1.0" />
Works with Android and other mobile browsing devices, too.
By default iOS browsers supply a set of default screen dimensions, regardless of actual screen res or orientation.
In order to get them to supply #media tags with the actual screen dimensions there is a Meta tag they will obey:
<meta name="viewport" content="width=device-width, initial-scale=1">
If you add this to your page(s) then your #media commands should work with the actual screen resolution of each device. You then have full control with your #media queries
You can then use things like width: 100% to use the actual screen width.
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Related
My site has a fixed layout with a size of 1090px.
When I use this meta tag:
<meta name="viewport" content="width=device-width, maximum-scale=1">
the page will load zoomed in. Not all the way though (roughly 300px in width are out of view).
Also, you can not zoom the page out far enough to see the whole thing.
Shouldn't the width=device-width solve that?
So I tried an initial-scale of 0.29, which worked fine for the iPhone. But when loading the site on an iPad, it would obviously be way too small.
How can I fix this?
UPDATE:
So I just figured, that the width seems to be defined by the height of my page.
Safari on the iPhone fits the height in the viewport and doesn't care about fitting the width, also won't let you zoom out to see the whole width. It seem like if the page would be higher, you could see more of the width.
The width is just fine in landscape.
If your design is not responsive, It is better to target particular device resolution like for 320 width I would go for <meta name="viewport" content="width=320">
I have also noticed that content set as device width tend to break on ios 4 safari. I am afraid it's not the problem of ios safari it's the non-responsive design that causing the problem.
Also if the design is not responsive, then using this combination is worst
user-scalable=no or maximum-scale=1 with initial-scale=1
playing with initial scale will not solve the problem for all the devices.
i'm using this template for wordpress:
http://demos.itsmattadams.com/jetwire/
When I try to load on iphone/ipad, the page don't fit to all wide because only show a portion. I don't want horizontal scroll either.
If I open the theme from a ThemeForest link, works good (maybe for the iframe?):
http://themeforest.net/item/jetwire-powerful-wordpress-blog-theme/full_screen_preview/2919709
I tried to change the main container width to 960px, but don't work.
Could somebody help me?
Remove this line
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
The site should then automatically fit inside the viewport. This line is basically telling the device to take the pixelwidth of the device (width=device-width) and match it to your site, by 'zooming in'.
Say your site is 960px wide, and the device is 320px wide; it will then only show the leftmost part (320px wide) of the site, leaving 640px 'flowing over' to the right.
Not specifying a viewport width will force the device to show the full site.
I'm developing a mobile website for iPhone and Android browsers.
As I was playing around with an Iphone 4 and a HTC Desire I found out that the two devices react differently on orientation change. If I load the website in portrait mode and then rotate the device to horizontal mode, the Iphone zooms closer to the content using the same width (320px). With an Android device, if I rotate it seems that the viewport changes, so there isn't any zooming going on (width >320px), instead the websites gets wider.
My current viewport (I already tried setting a fixed width of 320px):
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
Now my question: Is there a way to make the Android Webkit browser "zoom in" like an iPhone on orientation change from protrait to horizontal?
Thank you very much in advance!
Andrew
This functionality is present on iPhone because of the way the viewport works. Here is how to disabled it on all devices and thus creating the same user experience.
If you set your viewport to this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0," />
then it will prevent the iPhone from "re-zooming" back to device-width. This ALSO disables zoom entirely though. Don't have a better solution at this point.
I'm building an iphone version of a website and was curious of the best practices for choosing image sizes. I'm making a simple vertical column of images text. I originally thought that 300px would be the best size (320px portrait mode minus 10px margin each side). However when user rotates to landscape the images will now seem blurry & upscaled. The alternative is to make the images larger, but then in portrait mode they will all need downscaling- does this make the page load slower? I assumed most people view in portrait.
If I go with landscape/480px as the base size what viewport meta should I use to get it to size down for portrait? My current viewport meta tag is :
<meta name="viewport" content="user-scalable=no, width=device-width" />
Many thanks in advance
Some mobile web sites such as the BBC mobile website stop you zooming in on the main home page on an iPhone - how is this acheived. Is there a directive that has to be included in the HTMl code or something ?
You just need to tell the iPhone not to let the user zoom, with a meta-tag:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
This should still let your webpage rotate, but not zoom.
It's because the width of the site is set to the native resolution of the iPhone display. Mobile Safari never actually zooms past 100% on any site, on a standard sized site say (1000px wide) it is zoomed out to begin with and you specify the zoom level when double tapping or using the pinch gesture.
To achieve the same effect use a max width on your site to match the resolution of the iPhone which is 320px.
In CSS this would be done like:
div#wrapper
{
width: 320px;
}