NetTalk Central

Author Topic: How to zoom the site when in mobile?  (Read 225 times)

michelis

  • Hero Member
  • *****
  • Posts: 1231
    • MSN Messenger - alberto-michelis@hotmail.com
    • View Profile
    • ARMi software solutions
    • Email
How to zoom the site when in mobile?
« on: May 17, 2018, 06:29:22 AM »
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
-----------
Regards
Alberto

DonRidley

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 560
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: How to zoom the site when in mobile?
« Reply #1 on: May 17, 2018, 09:10:39 AM »
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
NetTalk 10.32
Clarion 10.12799

michelis

  • Hero Member
  • *****
  • Posts: 1231
    • MSN Messenger - alberto-michelis@hotmail.com
    • View Profile
    • ARMi software solutions
    • Email
Re: How to zoom the site when in mobile?
« Reply #2 on: May 17, 2018, 11:31:36 AM »
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.


« Last Edit: May 17, 2018, 11:43:52 AM by michelis »
-----------
Regards
Alberto

DonRidley

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 560
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: How to zoom the site when in mobile?
« Reply #3 on: May 17, 2018, 11:41:05 AM »
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

NetTalk 10.32
Clarion 10.12799

michelis

  • Hero Member
  • *****
  • Posts: 1231
    • MSN Messenger - alberto-michelis@hotmail.com
    • View Profile
    • ARMi software solutions
    • Email
Re: How to zoom the site when in mobile?
« Reply #4 on: May 17, 2018, 11:44:58 AM »
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.
-----------
Regards
Alberto

DonRidley

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 560
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: How to zoom the site when in mobile?
« Reply #5 on: May 17, 2018, 03:02:18 PM »
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
NetTalk 10.32
Clarion 10.12799

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 9320
    • View Profile
Re: How to zoom the site when in mobile?
« Reply #6 on: May 24, 2018, 12:51:17 AM »
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