Как определить, на какой версии iPhone работает код JavaScript?

Question

Необходимо различать iPhone3x и iPhone4x .Есть ли способ узнать версию из JavaScript, пожалуйста?

Answer 1

Это будет комбинация двух методов в Javascript:

function iPhoneVersion() {
  var iHeight = window.screen.height;
  var iWidth = window.screen.width;

  if (iWidth === 414 && iHeight === 896) {
    return "Xmax-Xr";
  }
  else if (iWidth === 375 && iHeight === 812) {
    return "X-Xs";
  }
  else if (iWidth === 320 && iHeight === 480) {
    return "4";
  }
  else if (iWidth === 375 && iHeight === 667) {
    return "6";
  }
  else if (iWidth === 414 && iHeight === 736) {
    return "6+";
  }
  else if (iWidth === 320 && iHeight === 568) {
    return "5";
  }
  else if (iHeight <= 480) {
    return "2-3";
  }
  return 'none';
}

function isIphone() {
  return !!navigator.userAgent.match(/iPhone/i);
}

Так что все, что вам нужно сделать, это проверить, если это Iphone, а затем получить версию:

if ( isIphone() && iPhoneVersion() === "6"){
  //code..
}

Answer 2

Вы можете использовать navigator.userAgent для проверки версии ОС, но здесь проблема не в этом.

Что вы можете сделать, это использовать медиазапросы для проверки фактического разрешения экрана устройства, котороеможет быть причиной проблемы.

var isRetina = window.matchMedia("(-webkit-min-device-pixel-ratio: 2)").matches;

Вы также можете обойтись без JavaScript, используя медиазапросы для загрузки различных таблиц стилей для дисплеев сетчатки:

<link rel="stylesheet" href="retina.css"
    media="only screen and (-webkit-min-device-pixel-ratio: 2)" />

Answer 3

Используя расширение WEBGL_debug_renderer_info, которое является частью WebGL API , вы можете получить поставщика графического процессора и имя средства визуализации.

В сочетании с размерами экранаУстройство, которое вы можете точно определить, какая версия это.Пример кода ниже показывает, как вы можете сделать это для всех версий iPhone, включая 3 и 4.

    // iPhone model checks.
function getiPhoneModel() {
    // Create a canvas element which can be used to retrieve information about the GPU.
    var canvas = document.createElement("canvas");
    if (canvas) {
        var context = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
        if (context) {
            var info = context.getExtension("WEBGL_debug_renderer_info");
            if (info) {
                var renderer = context.getParameter(info.UNMASKED_RENDERER_WEBGL);
            }
        }
    }

    // iPhone X
    if ((window.screen.height / window.screen.width == 812 / 375) && (window.devicePixelRatio == 3)) {
        return "iPhone X";
    // iPhone 6+/6s+/7+ and 8+
    } else if ((window.screen.height / window.screen.width == 736 / 414) && (window.devicePixelRatio == 3)) {
        switch (renderer) {
            default:
                return "iPhone 6 Plus, 6s Plus, 7 Plus or 8 Plus";
            case "Apple A8 GPU":
                return "iPhone 6 Plus";
            case "Apple A9 GPU":
                return "iPhone 6s Plus";
            case "Apple A10 GPU":
                return "iPhone 7 Plus";
            case "Apple A11 GPU":
                return "iPhone 8 Plus";
        }
    // iPhone 6+/6s+/7+ and 8+ in zoom mode
    } else if ((window.screen.height / window.screen.width == 667 / 375) && (window.devicePixelRatio == 3)) {
        switch(renderer) {
            default:
                return "iPhone 6 Plus, 6s Plus, 7 Plus or 8 Plus (display zoom)";
            case "Apple A8 GPU":
                return "iPhone 6 Plus (display zoom)";
            case "Apple A9 GPU":
                return "iPhone 6s Plus (display zoom)";
            case "Apple A10 GPU":
                return "iPhone 7 Plus (display zoom)";
            case "Apple A11 GPU":
                return "iPhone 8 Plus (display zoom)";
        }
    // iPhone 6/6s/7 and 8
    } else if ((window.screen.height / window.screen.width == 667 / 375) && (window.devicePixelRatio == 2)) {
        switch(renderer) {
            default:
                return "iPhone 6, 6s, 7 or 8";
            case "Apple A8 GPU":
                return "iPhone 6";
            case "Apple A9 GPU":
                return "iPhone 6s";
            case "Apple A10 GPU":
                return "iPhone 7";
            case "Apple A11 GPU":
                return "iPhone 8";
        }
    // iPhone 5/5C/5s/SE or 6/6s/7 and 8 in zoom mode
    } else if ((window.screen.height / window.screen.width == 1.775) && (window.devicePixelRatio == 2)) {
        switch(renderer) {
            default:
                return "iPhone 5, 5C, 5S, SE or 6, 6s, 7 and 8 (display zoom)";
            case "PowerVR SGX 543":
                return "iPhone 5 or 5c";
            case "Apple A7 GPU":
                return "iPhone 5s";
            case "Apple A8 GPU":
                return "iPhone 6 (display zoom)";
            case "Apple A9 GPU":
                return "iPhone SE or 6s (display zoom)";
            case "Apple A10 GPU":
                return "iPhone 7 (display zoom)";
            case "Apple A11 GPU":
                return "iPhone 8 (display zoom)";
        }
    // iPhone 4/4s
    } else if ((window.screen.height / window.screen.width == 1.5) && (window.devicePixelRatio == 2)) {
        switch(renderer) {
            default:
                return "iPhone 4 or 4s";
            case "PowerVR SGX 535":
                return "iPhone 4";
            case "PowerVR SGX 543":
                return "iPhone 4s";
        }
    // iPhone 1/3G/3GS
    } else if ((window.screen.height / window.screen.width == 1.5) && (window.devicePixelRatio == 1)) {
        switch(renderer) {
            default:
                return "iPhone 1, 3G or 3GS";
            case "ALP0298C05":
                return "iPhone 3GS";
            case "S5L8900":
                return "iPhone 1, 3G";
        }
    } else {
        return "Not an iPhone";
    }
}

Answer 4

Я столкнулся с подобной проблемой некоторое время назад. Работая над клиентским веб-сайтом, на котором было загружено много видео с помощью javascript, я обнаружил, что видеоформат, который им нужно было использовать, имеет странную частоту кадров, которая не работает на iPhone 3GS -.

Следуя подходу atornblad, я нашел решение, которое идеально подходило мне:

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
    if (!(window.devicePixelRatio > 1)){
        //non retina iphone / ipod
    }
};

Сначала проверяется, подходит ли пользователь ко мне с iPod или iPhone. Затем он проверяет поддержку Retina. Так как его поддерживает только iPhone 4+, мне удалось назвать правильные видеофайлы для старых устройств.

Answer 5

Кое-что о более широких методах измерения скорости процессора: здесь они могут быть «непригодными», но в некоторых случаях может быть полезно выяснить вычислительную мощность целевого устройства.

Итак, вот что я хочу добавить к этим методам: вместо подсчета фиксированного значения и измерения времени было бы более надежным подсчитывать фиксированное время и затем сравнивать достигнутые значения. Если ваш пользователь посещает вас на устройстве, которое работает намного медленнее, возможно, из-за того, что оно работает внутри эмулятора, ему придется подождать, пока вы не начнете считать. если бы вы вышли из цикла после, скажем, 200 мс, вы бы просто оценили очень низкое значение, и на UX это не повлияло.

Кроме того, всегда приятно знать, сколько времени займет операция, это уменьшает неопределенность.

Answer 6

Может быть, вы можете проверить это, взяв версию ОС в запросе navigator.appVersion.indexOf("... iphone3G имеет Apple iOS 4.2.1 iphone4 и 4S имеют Apple iOS 5.0.1, но iphone3GS имеет то же самое.

Как вариант, вы можете предоставить тест скорости процессора, используя большой цикл. Что-то вроде for (var i=0, k=1; i<5000000; i++) k++; и проверка заняла время для этого.

iphone3G (S) имеет максимальную частоту 600 МГц, а iphone4 - 1 ГГц. Таким образом, есть различие, и вы можете поймать его после некоторых тестов (петли) и определить скорость петли для каждого поколения iphone.

Но обратите внимание, что все эти способы являются грубыми и, возможно, не были правильными в других условиях.