NetTalk Central

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

michelis

  • Hero Member
  • *****
  • Posts: 1192
    • 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
  • Sr. Member
  • *****
  • Posts: 483
    • 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.15
String Theory 2.70
X-Files 2.95
Clarion 10.12799
Insight 2  2.27
Draw 4.15
Cryptonite 1.87
File Explorer 5.61
WinEvent  5.15
FM3   5.32
GPF Reporter 2.35
Hyperactive 2.13
jFiles 1.57
MessageBox  2.39
Windows 10 64bit
Browser:  Firefox 57.0.4

michelis

  • Hero Member
  • *****
  • Posts: 1192
    • 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
  • Sr. Member
  • *****
  • Posts: 483
    • 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.15
String Theory 2.70
X-Files 2.95
Clarion 10.12799
Insight 2  2.27
Draw 4.15
Cryptonite 1.87
File Explorer 5.61
WinEvent  5.15
FM3   5.32
GPF Reporter 2.35
Hyperactive 2.13
jFiles 1.57
MessageBox  2.39
Windows 10 64bit
Browser:  Firefox 57.0.4

michelis

  • Hero Member
  • *****
  • Posts: 1192
    • 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
  • Sr. Member
  • *****
  • Posts: 483
    • 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.15
String Theory 2.70
X-Files 2.95
Clarion 10.12799
Insight 2  2.27
Draw 4.15
Cryptonite 1.87
File Explorer 5.61
WinEvent  5.15
FM3   5.32
GPF Reporter 2.35
Hyperactive 2.13
jFiles 1.57
MessageBox  2.39
Windows 10 64bit
Browser:  Firefox 57.0.4