SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Location
    Tucson, AZ
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive Design Looks Fine in Browser - Breaks on iPhone

    http://goo.gl/qaPKx

    If you shrink the browser to 480px or less, you will see the mobile design displays fine. However, on an actual iPhone (in portrait), it displays with the content area being much too wide.

    Here's a picture of it on an iPhone:
    http://img703.imageshack.us/img703/1944/photoik.png

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    See what happens if you add this to the <head> of your document:

    Code:
    <meta name="viewport" content="width=device-width; initial-scale=1.0">

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Location
    Tucson, AZ
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    See what happens if you add this to the <head> of your document:

    Code:
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    Code:
    <meta name="viewport" content="initial-scale=1, width=device-width">
    Is already in the head. No luck.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Location
    Tucson, AZ
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The content area seems to be extending to around 480 pixels (which is what the media query is set for).

    Oddly enough this is also happening to another site I'm working on. But the weird thing is (and you may just call me crazy), the other website was working fine but is now having the same issue.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Location
    Tucson, AZ
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Edit - My previous post made the solution come to mind. I installed the new Facebook for Wordpress plugin and despite the plugin not being active on those pages, it was causing the container to stretch to a little over 400px wide.


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
  •