How to make my website scale properly on an iPhone

Community Forums Forums Design Tips and Tricks How to make my website scale properly on an iPhone

This topic is: not resolved

This topic contains 5 replies, has 3 voices, and was last updated by  sebgates 1 year, 3 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #48347

    sebgates
    Participant
    Post count: 57

    Hi. I just built a Genesis site using Woo Commerce. I found that the ‘Select options’ buttons on the products are not responsive and break the layout when viewed on a mobile device. I have now decided to go with a min-width 960px and a max width 1152px design. I have managed to adjust the css to make this happen.

    I then went to look at the site on a mobile phone. My iPhone does not scale to the view port. I can remember that there is a code or a bit of js that you add to the head of the site – but I don’t recall how to do it. This bit of code then makes the whole website fit on the screen. At the moment it just shows me the top left hand corner of the site and I have to zoom out on every page to see the whole page on my phone.

    Can anyone help? http://thestationeryline.xl-websites.com/

    Thanks – Seb

    http://thestationeryline.xl-websites.com/
    #48348

    sebgates
    Participant
    Post count: 57

    Sorry me again: I found the code on CSS tricks: <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0;”>

    I added it in my ‘Head’

    I added this but it has not made any difference.

    How do I make the Genesis theme unresponsive so the viewport command works?

    Seb

    #48349

    sebgates
    Participant
    Post count: 57

    I figured it out: <meta name=”viewport” content=”width=device-width; initial-scale=0; maximum-scale=1.0;”>

    Make the initial scale =0

    #49041

    Dara
    Participant
    Post count: 2

    Hi, thanks for the tip! it looks as though your header scales down and shows perfectly on small screens. I and others have had trouble with this with various themes. I am wondering if you can share how you accomplished this. Thanks so much for your help.

    #49131

    moshpitqueen
    Participant
    Post count: 4

    I would be interested in this info as well.

    #49138

    sebgates
    Participant
    Post count: 57

    As it happens the scale to viewport did not do the job. The correct code was the one I found on CSS Tricks:

    <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0;”>

    I think the way to do it is to find a way to make the whole framework unresponsive and then add the code in your head section. The code makes iPhone. ipad devices scale the web site properly.

    The way to get round the header issue in Genesis is to use this plug in. http://designsbynickthegeek.com/plugins/genesis-responsive-header

    I have only been using Genesis for about 6 months so I am no expert.

    Hope that helps – Seb

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.