On Aug 5, 2010, at 1:41 PM, David Laakso wrote:
>
>
> Whoops. Hit send too soon. Here's the rest of it...
>
>
> Got the iPod screenshot, thanks -- will look into it.
>
> The image issue has been resloved in the Opera Mini Simulator and in the Sany
> Mirro handset [a low-end device] with Duncan's suggestion of setting Image
> Quality High. This makes the image from too narrow to too wide.
>
> I changed the CSS as follows to reduce the image width: /* was 96% */
>
> @media handheld, screen and (max-width: 480px), screen and (max-device-width:
> 480px) {
> body#p #main img {
> max-width : 35% !important;
> height : auto !important;
> }
> } /* for Opera Mini 5.1 on SanyoMirro 4 BoostMobile*/
>
If you add this in the above @media rule the horizontal scrolling will go away.
header, #page {
margin : 0 auto;
width: 100%;
}
I was not aware the Opera Mini image rendering differences in image quality
setting with low, medium and high until Duncan pointed out.
>From the mobile user point of view, changing image quality to high might not
>be a good approach though. In my iPod, the default quality is medium, and I
>assume this is the majority will see in their Opera Mini.
Some thoughts, not related to the issue you are having, but I think they are
valid points for your mobile users.
A side note, I have just completed the W3C Mobile Best Practice course taught
by Phil, and have learned many practical, useful skills and knowledges. One of
the strong emphasizes Phil taught us, is to "Specify the size of images in
markup, if they have an intrinsic size."
To get a Mobile OK (optimized) site, a page cannot be more than 10K. That image
you have, is 170kb and that you using one style sheet with media queries to
target all devices, if I am a user on the go who needs to watch over bandwidth
and monthly phone bill, I don't think I would be happy visiting your site.
I was very excited when I first learned how to use media queries just few
months ago, but after the course, I found that just the media queries will not
do if you need to optimized a mobile version site.
I completed the course with a conclusion that Content negotiation almost is a
must just for one simple reason, using media queries to "display:none" only
makes the content/element you do not want mobile user to see off the screen, it
does not eliminate the sizes that slow the page load, eat up user's phone bill.
This site may give you a general idea how much it may cost your mobile user per
page.
http://mobiready.com
tee
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
