NetTalk Central

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

Alberto

  • Hero Member
  • *****
  • Posts: 1844
    • 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

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • 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
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

Alberto

  • Hero Member
  • *****
  • Posts: 1844
    • 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

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • 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

"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

Alberto

  • Hero Member
  • *****
  • Posts: 1844
    • 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

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • 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
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11158
    • 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