SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Testing website width on small phones

    I want to have a single version of my website for desktop and mobile. The tricky part is making the width of my product images as large as possible without being large enough to cause a horizontal scrollbar to appear. I had it just right for my wife's iPhone 4 and my Android Galaxy Nexus, but tested on someone else's Android phone and a portion of the site was off-screen to the right with a scrollbar. The phone I was using seemed to have a smaller and lower resolution screen than mine. Is there any way to come up with the right width without trying a whole bunch of different phones?

    I have a saucelabs.com account and love the service but there doesn't seem to be a way to do that there.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    It would be useful to know more about your site. You can use the viewport meta tag in conjunction with @media rules to help your layout fit on any screen size. Often I set the content area to max-width: 98% or similar, and set the images to max-width: 100%.

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,380
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes, we need to see the code you are using to style your images. For instance, are you sizing them with pixels or percentages?
    <img src="filename.jpg" width="1200" alt="Avoid using pixel widths">
    <img src="filename.jpg" width="100%" alt="Use percentages for image widths.">

    For responsive images (this "max-width" part will keep their image width, but when the screen is smaller, will not overflow the div container):

    <div style="width:100%">
    <img src="xxxx.jpg" width="900px" style="max-width:100%">
    </div>
    Steve Husting

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <div style="width:100%">
    <img src="xxxx.jpg" width="900px" style="max-width:100%">
    </div>
    Wow, that works incredibly well. The only problem is the aspect ratio of the images gets messed up when the width starts to drop and the height remains the same. Can anything be done about that?

    EDIT: height:auto !

    Stuff like this and stuff Ralph has shown me previously always makes me wonder what other CSS tricks are out there that I should really know about. I like the stuff that is really simple and degrades gracefully. There probably isn't a better method of discovery than just stumbling across them though. I can't justify pouring over the specs at this point.

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only drawback to this I've found is height:auto doesn't allow for "placeholder" space where the image will load so the height of the page expands as the images load. Any way to fix that?

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is width:auto; good to use in conjunction with max-width:100%; and height:auto; ? My images are messed up in IE8 otherwise.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •