Normally, I would apply
Code: Select all
#mainpane {
marign: 0px auto;
(...)}
But this does not seem to do the trick for mobile devices, does it?
Code: Select all
#mainpane {
marign: 0px auto;
(...)}
Erm, no?Huhu wrote:Centering seems to be quite a topic with css.
It also might help to take a hint from YL's 2k11 template by using <meta name="viewport" content="width=device-width"> in your template's <head>.yellowled wrote:.... and a definite width (does not have to be fixed, can be in percent or em or whatever) to the container which is supposed to be centered.
Code: Select all
@viewport{
zoom: 1.0;
width: extend-to-zoom;
}
Code: Select all
@-ms-viewport{
width: extend-to-zoom;
zoom: 1.0;
}
That used to be a bug in iOS 6 which is fixed in iOS 7 and is handled by the iOS Orientationchange Fix in 2k11. I'm not aware of any other mobile OS having issues with this.Don Chambers wrote:Having said that, I have also read a recommendation to avoid setting width to device-width because some devices, such as the iPhone, set the same width regardless of whether the phone is held portrait or landscape.
That is supposed to do the same thing as the fix I mentioned above, I think. I never used it this way, but I do now usually use it this way:Don Chambers wrote:One such recommendation I read was to use <meta name="viewport" content="initial-scale=1">.
Code: Select all
<meta name="viewport" content="width=device-width, initial-scale=1">
Okay, done.yellowled wrote:I might be able to test this and include it in the upcoming 1.7.5. Maybe.
My bad - I said I had an iPhone 4, but forgot to mention I am running IOS 7.0.2...not quite the most recent, but newer than ios6. Not sure "width=device-width" is even necessary, if you are also using "initial-scale=1". But I will admit to not being as up to date as you might be on the latest html and css.yellowled wrote:That used to be a bug in iOS 6 which is fixed in iOS 7 and is handled by the iOS Orientationchange Fix in 2k11. I'm not aware of any other mobile OS having issues with this.
width=device-width is the actual viewport width of the device (the “screen resolution”). This is important since we now might encounter devices with retina (high resolution) screens. On those screens, width and device-width are actually different, but in most cases, you'll want to work with the device-width in @media queries.Don Chambers wrote:Not sure "width=device-width" is even necessary, if you are also using "initial-scale=1".
Found some excellent info about viewports on Apple's safari guide. One particular sentence there addressed what we are talking about:yellowled wrote: width=device-width is the actual viewport width of the device (the “screen resolution”). This is important since we now might encounter devices with retina (high resolution) screens. On those screens, width and device-width are actually different, but in most cases, you'll want to work with the device-width in @media queries.
Remember that Safari is not the only mobile browser and iOS not the only mobile OS.Don Chambers wrote:So, device-width does not need to be expressly stated IF scale is set to 1.0, but it certainly doesn't hurt.