Как сделать текст таблицы меньше, если обнаружен мобильный пользователь?

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>

Обратите внимание: в настоящее время нет стилей, связанных с размером шрифта, которые влияют на класс TFtable .

Answer 1

Вы можете использовать CSS медиазапросы для целевых устройств с областью просмотра менее 600 пикселей.

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

Answer 2

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

}

Answer 3

Из отличного ответа Обнаружение мобильного браузера , вот решение.

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

, как вы просили только для iPhone,

вот что вы можете сделать

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

использовать эту переменную iOS, iOS будет логическим значением.