How do I make table text smaller if a mobile user is detected?

Question

My JS:

window.onload = function(){
    if(/Android|webOS|iPhone|Windows Phone/i.test(this.navigator.userAgent)){
        document.getElementById('datatable').style.fontSize = "10px";
    } else {
        document.getElementById('datatable').style.fontSize = "20px";
    }
}

HTML:

<table class="TFtable" id="datatable">
  ...
</table>

Please note: there are currently no styles to do with font-size which are affecting class 'TFtable'.

Why are you not working with media queries? – Alon Eitan Apr 26 '20 at 12:45 — Alon Eitan, Apr 26 '20 at 12:45

score 1 · Accepted Answer · answered Apr 26 '20 at 12:52

1

You can use CSS media queries to target devices with a viewport of less than 600px.

@media only screen and (max-width: 600px) {
  table.TFtable {
    font-size: /* your smaller font size*/;
  }
}

answered Apr 26 '20 at 12:52

Ben

3,160
3
17
34

Finally - A proper answer – Alon Eitan Apr 26 '20 at 12:54

Atul Rajput · Answer 2 · 2020-04-26T13:03:01.847

0

From a excelent answer Detecting a mobile browser, here is the solution.

if (typeof window.orientation !== 'undefined') {
    document.getElementById('datatable').style.fontSize = "10px";
}else {
    document.getElementById('datatable').style.fontSize = "20px";
}

as you requested for iPhone only,

here is what you can do

var iOS = !!navigator.platform && /iPhone/.test(navigator.platform);

use this iOS variable, iOS will be a boolean.

edited Apr 26 '20 at 13:03

answered Apr 26 '20 at 12:45

Atul Rajput

4,073
2
12
24

but keep one thing on mind that this will happy all the mobile and iPad as well, every device which use orientation – Atul Rajput Apr 26 '20 at 12:47
is there a way of detecting just iPhones? – ecqo Apr 26 '20 at 12:48
if the requirement is to change font only on mobile devices, then CSS option is the best as answered by kaleidawave, it will work all the devices, but if you want to do something with iPhone only then that will not work. – Atul Rajput Apr 26 '20 at 13:06

score 0 · Answer 3 · answered Apr 26 '20 at 12:49

0

if ($(window).width() < 900) {
   document.getElementById('datatable').style.fontSize = "10px";
}
else{
        document.getElementById('datatable').style.fontSize = "20px";

}

answered Apr 26 '20 at 12:49

Nourhan Ahmed

179
1
10

How do I make table text smaller if a mobile user is detected?

3 Answers3