it-swarm.com.de

Holen Sie sich Bildschirmauflösung auf einer mobilen Website

Ich entwerfe eine mobile Website mit einem Abschnitt, von dem Hintergrundbilder heruntergeladen werden können. Um vielen Benutzern gerecht zu werden, möchte ich das Herunterladen eines Hintergrundbildes basierend auf der Bildschirmauflösung ermöglichen. Ich möchte die Auflösung von JavaScript erkennen und das entsprechende Hintergrundbild anzeigen.

Das habe ich online gefunden und xD ausprobiert:

width  = window.innerWidth  || document.body.clientWidth
height = window.innerHeight || document.body.clientHeight;

Für meine SGS3, die die Auflösung 720x1280 hat, bekomme ich die 360x567.

Wie sollte ich die Auflösung des Telefons anhand von JavaScript ermitteln?

9
Banana

Sie können vielleicht das screen-Objekt verwenden:

var w = screen.width;
var h = screen.height;

Update - Versuche es mit dem window.devicePixelRatio zu benutzen:

var ratio = window.devicePixelRatio || 1;
var w = screen.width * ratio;
var h = screen.height * ratio;
31
user1693593

Ken Fyrstenberg, großartiges Zeug, danke. Ich suchte nach einer einfachen Möglichkeit, alle möglichen Bildschirmgrößen und Auflösungsdaten zu ermitteln, und um die Frage zu beantworten, wofür das Verhältnis gut ist, lässt sich feststellen, ob es sich beispielsweise um ein hochauflösendes Retina-Anzeigegerät handelt.

wh:768x1024 cwh:768x905 rwh:1536x2048 ts:touch

kombiniert mit den Berührungstests überprüfen Sie diese verwandten SO :

Ich kann ein sehr gutes Gefühl für die tatsächlichen Bildschirm-/Berührungsspezifikationen der Geräte erhalten, die unsere echten Benutzer ausführen.

was Sie für Web-Inhalte wirklich interessieren, ist die Größe des tatsächlichen Browser-Innenfensters und der Speicherplatz, den Sie auf dem Gerät zugewiesen bekommen. Nebenbei bemerkt, ich habe bereits gesehen, dass Apple-Geräte scheinbar immer die Abmessungen des Hochformatmodus angeben, z. B. 768 x 1024 für ein nicht-Retina-Display-iPad. Dies ist ein wenig ärgerlich, da ich gehofft hatte, auch zu erfahren, wie die meisten Benutzer tatsächlich arbeiten Interaktion mit dem Web und unserer Website.

Android scheint die tatsächliche Breite/Höhe dieses Moments anzugeben, dh entweder Querformat oder Querformat/Höhe.

Zum Beispiel:

var ratio = window.devicePixelRatio || 1;
var is_touch_device = 'ontouchstart' in document.documentElement;
var touch_status = (is_touch_device) ? 'touch' : 'no-touch';
touch_status = ' ts:' + touch_status;
var width_height = 'wh:' + screen.width + 'x' + screen.height;
var client_width_height = ' cwh:' + document.documentElement.clientWidth + 'x' + document.documentElement.clientHeight;
var rw = screen.width * ratio;
var rh = screen.height * ratio;
var ratio_width_height = ' r:' + ratio + ' rwh:' + rw + 'x' + rh;
var data_string = width_height + client_width_height + ratio_width_height + touch_status;

Dadurch werden viele Daten über das Client-System erstellt, die Sie mit der gewünschten Methode an etwas weitergeben können.

UPDATE: Es dauerte nur ein paar Minuten, um herauszufinden, wie Apple-Geräte tatsächlich ihre Breite/Höhe melden:

wh:375x667 cwh:667x375 r:2 rwh:750x1334 ts:touch Device type: mobile

Wie Sie sehen, meldet die document.documentElement.clientWidth-Methode die tatsächliche Breite, wenn Hochformat/Querformat, gutes Material.

3
Lizardx

Dies funktioniert auch auf mobilem Gerät  

screen_width = document.documentElement.clientWidth;
screen_heght = document.documentElement.clientHeight;
2
Jan Dürrer

Sie können window.screen.width und window.screen.height verwenden, um die Bildschirmauflösung des Geräts zu ermitteln.

0
Strille