Welcome to WebmasterWorld Guest from 50.17.114.227

Forum Moderators: bakedjake

Message Too Old, No Replies

Is image width of 100% acceptable for mobile viewing?

     
1:15 pm on Apr 30, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member sgt_kickaxe is a WebmasterWorld Top Contributor of All Time 5+ Year Member

joined:Apr 14, 2010
posts:3169
votes: 0


I'm creating a mobile version of a website and finding the images to be problematic. They all have a width="400" set and don't fit on mobile screens. In trying to find a way to show a different image size based on user agent it dawned on me that something like this might be easier, via css.

IMG {width:100%; max-width:400px;}

On the regular site they would remain unchanged but they would, and do, scale down to fit any mobile screen.

Is there anything I should be aware of with the above on a mobile screen? Are there any SEO implications or indexing issues related to using 100% width?
9:36 pm on Apr 30, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member sgt_kickaxe is a WebmasterWorld Top Contributor of All Time 5+ Year Member

joined:Apr 14, 2010
posts:3169
votes: 0


Perhaps I posted this in the wrong forum ?
5:09 am on May 5, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 27, 2003
posts: 714
votes: 0


Make you max width smaller than 400px. It's too large for some popular smartphones that are based on widths of 320px like older iPhone models.
6:03 am on May 24, 2011 (gmt 0)

Moderator from US 

WebmasterWorld Administrator robert_charlton is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 11, 2000
posts:11309
votes: 163


Any way to put large images in divs that don't display in mobile style sheets?
7:34 am on June 1, 2011 (gmt 0)

Senior Member from LK 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 16, 2005
posts:2416
votes: 17


Yes you can using conditional CSS. Its not a good idea as most browsers will download the images anyway, so you are wasting bandwith on images that never show.