4 Replies - 3060 Views - Last Post: 13 December 2013 - 02:18 PM

#1 sleepydad  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 13-December 13

Fit to screen on load

Posted 13 December 2013 - 11:21 AM

I have designed a site with a css width set to 1000px. I'm wondering how to fit the width of the site into mobile browsers (ie Galaxy, iPhone, etc) on load. Currently the site loads and only a small portion shows. Of course 'pinching' or double clicking renders it completely in the window, but I want this to happen on load.

Thanks in advance for suggestions -
sleepydad
Is This A Good Question/Topic? 0
  • +

Replies To: Fit to screen on load

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1184
  • View blog
  • Posts: 7,254
  • Joined: 07-September 06

Re: Fit to screen on load

Posted 13 December 2013 - 12:51 PM

Well, if you want to change the layout of the site to be suitable for whatever mobile device you are on you could look into CSS media queries they are a nice way to specify different styles (such as width of objects) based on anything from screen size to whether it is print media or not.

I think that that is probably your best bet as I don't know of anyway to change the zoom level reliably through Javascript (I know that IE has a filter you can use, but other than that I am unsure). That isn't to say there isn't a nice standard way of doing it, I just don't know what it is.

Normally, I don't have that problem with pages loading on my phone though, it pretty much always resizes the page to fit... so there may be an underlying problem in the way you are accomplishing your page layout that is causing the phone's browser to be unable to determine what level of zoom should be used to get the page width correct.
Was This Post Helpful? 0
  • +
  • -

#3 sleepydad  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 13-December 13

Re: Fit to screen on load

Posted 13 December 2013 - 01:26 PM

View PostBetaWar, on 13 December 2013 - 12:51 PM, said:

Well, if you want to change the layout of the site to be suitable for whatever mobile device you are on you could look into CSS media queries they are a nice way to specify different styles (such as width of objects) based on anything from screen size to whether it is print media or not.

I think that that is probably your best bet as I don't know of anyway to change the zoom level reliably through Javascript (I know that IE has a filter you can use, but other than that I am unsure). That isn't to say there isn't a nice standard way of doing it, I just don't know what it is.

Normally, I don't have that problem with pages loading on my phone though, it pretty much always resizes the page to fit... so there may be an underlying problem in the way you are accomplishing your page layout that is causing the phone's browser to be unable to determine what level of zoom should be used to get the page width correct.


I did a bit of research since asking the question, and seem to have found something that works. I tested on both iPhone and Android with success on each.

<meta content='width=device-width;initial-scale=1.0;minimum-scale=1.0;maximum-scale=1.0;user-scalable=yes;width=1000' name='viewport'/>



I thought I'd post this solution for anyone else running into this problem.
Was This Post Helpful? 0
  • +
  • -

#4 sleepydad  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 13-December 13

Re: Fit to screen on load

Posted 13 December 2013 - 02:14 PM

errata:
<meta content='width=1000;initial-scale=1.0;minimum-scale=1.0;maximum-scale=1.0;user-scalable=yes;' name='viewport'/>


Was This Post Helpful? 0
  • +
  • -

#5 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1184
  • View blog
  • Posts: 7,254
  • Joined: 07-September 06

Re: Fit to screen on load

Posted 13 December 2013 - 02:18 PM

Cool, thank you for posting the solution you came up with, it is always nice to be able to have a resource others can learn from later :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1