How to zoom the site when in mobile?

[Alberto]

Hi,
I am trying to adapt my site to mobile devices.
What I first look y that the site opens in full width (first image) and then the user needs to zoom in.
How can I modify it to be like image 2?
Thanks

[DonRidley]

CSS is the main thing with a few conditions set in NetTalk.

You will have to play around with CSS media queries.

Something similar to:

@media screen and (max-width: 600px) {

}

This basically tells any CSS class within the media query to only "activate" when ever the query condition is met.  In the above query it is a screen width of 600 pixels.

I also use p_web.GSV('_screenWidth_') < 600 in a few places to hide or modify various elements in NetTalk.

I use CHOOSE() fairly often.  CHOOSE(p_web.GSV('_screenWidth_') < 600,' someCSSclass ','')



Don

[Alberto]

ok, thanks, I undestand I have to meke it with CCS but what to put in

@media screen and (max-width: 600px) {

}

for the entire page to be zoomed?

ive tried with:

@media screen and (max-width: 600px) {
   .nt-body {width:150%;}
   .nt-body-div {width:150%;}
}

but nothimg...

Another problem I see is that if I see the site in CHROME and make the window small it looks ok buet in the cel phone it looks super small, see images.

[DonRidley]

Ah.  I was thinking along the lines of eliminating the need to zoom in the first place.

I'm not sure how to force a zoom at run time. 

There's probably JavaScript that would do it.

Don

[Alberto]

Another problem I see is that if I see the site in CHROME and make the window small it looks ok buet in the cel phone it looks super small, see images.

[DonRidley]

Try pressing CTRL+Shift+M to emulate a mobile environment. 

That will make developing the app easier.

Probably will not help the display size issue.

Don

[Bruce]

I think the setting you are really looking for here is on the Global Activate Web Server extension.
Web Apps tab, "turn off pinch-to-zoom" option.

cheers
Bruce