Musisz rozróżnić iPhone3x i iPhone4x . Czy jest jakiś sposób, aby wymyślić wersję z JavaScript?

11
BreakPhreak 29 listopad 2011, 15:29

6 odpowiedzi

Najlepsza odpowiedź

Możesz użyć navigator.userAgent, aby sprawdzić wersję systemu operacyjnego, ale to nie jest tutaj problem.

Co możesz zrobić, to używać zapytań multimedialnych, aby sprawdzić rzeczywistą rozdzielczość ekranu urządzenia, co może być przyczyną problemu pod ręką.

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

Prawdopodobnie mógłbyś również zrobić bez JavaScript, korzystając z zapytań multimediów do ładowania różnych arkuszy stylów do wyświetlaczy Retina:

<link rel="stylesheet" href="retina.css"
    media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
7
Anders Marzi Tornblad 29 listopad 2011, 12:00

Byłoby to połączenie dwóch metod w 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);
}

Więc wszystko, co musisz zrobić, to test, jeśli jest to iPhone, a następnie uzyskać wersję:

if ( isIphone() && iPhoneVersion() === "6"){
  //code..
}
9
Oleg Dater 15 październik 2018, 19:01

Przy użyciu rozszerzenia webgl_debug_renderer_info, która jest częścią WebGL API, Jesteś w stanie odzyskać sprzedawcę GPU i nazwę renderowania.

Łącząc to z wymiarami ekranu urządzenia, które można dokładnie zdefiniować, która wersja jest. Poniższy przykład kodu pokazuje, w jaki sposób możesz to zrobić dla wszystkich wersji iPhone, w tym 3 i 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";
    }
}
6
Josh Grew 11 kwiecień 2018, 11:46

Nadszedłem do podobnego problemu jakiś problem. Praca na stronie internetowej klienta, która miała wiele filmów załadowanych za pośrednictwem JavaScript, dowiedziałem się, że format wideo potrzebny do użycia miał dziwny wskaźnik ramowy, który nie działa na iPhone 3GS -.

Po podejściu z ATornblad dostałem do tego rozwiązania, które idealnie nadają się do tego, czego potrzebowałem:

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

Najpierw sprawdza, czy użytkownik przychodzi do mnie z iPoda lub iPhone'a. Następnie sprawdza wsparcie siatkówki. Ponieważ tylko iPhone 4+ obsługuje go, udało mi się zadzwonić do prawidłowych plików wideo dla starszych urządzeń.

1
Fernanda Parisi 17 grudzień 2012, 17:03

Coś w bardziej procesorowych metodach pomiarowych: mogą być tutaj "niezdatnym" podejściem, ale dowiedz się, że moc obliczeniowa urządzenia docelowego może być przydatna dla niektórych przypadków.

Oto coś, co chcę dodać do tych metod: zamiast liczyć ustaloną wartość i pomiar czasu, byłoby bardziej solidne, aby liczyć na stały czas, a następnie porównuj osiągnięte wartości. Jeśli Twój użytkownik odwiedza Cię na urządzeniu, który jest znacznie wolniejszy, może dlatego, że działa wewnątrz emulatora, będzie musiał poczekać, aż policzyłeś do n. Jeśli opuściłeś pętlę po tym, powiedzmy 200ms, po prostu odepchnąłbyś bardzo niską wartość, a UX nie miał wpływu.

Dodatkowo, zawsze jest miło wiedzieć, jak długo przejmie operacja, zmniejsza niepewności.

0
tinman2501 2 październik 2015, 09:49

Może możesz to sprawdzić, biorąc wersję OS w zapytaniu navigator.appVersion.indexOf("... iPhone3g ma Apple IOS 4.2.1 iPhone4 i 4s mają Apple IOS 5.0.1, ale iPhone3GS ma to samo.

Jako wariant możesz dostarczyć test prędkości procesora, używając dużej pętli. Coś takiego jak for (var i=0, k=1; i<5000000; i++) k++; i sprawdzaj spożywany czas.

IPhone3G (s) ma maksymalnie 600 MHz, a iPhone4 ma 1 GHz. Istnieje więc rozróżnienie i możesz go złapać po niektórych testach (pętli) i zdefiniować prędkość pętli dla każdej generowania iPhone'a.

Ale zauważ, że wszystkie sposoby są szorstkie i mogą nie były poprawne w innych warunkach.

-1
Yan Pak 29 listopad 2011, 12:31