Keskustelu: Nettisivujen teko: Mobiililaitteiden viewport koko

Minulla on projektina mainostenvälityspalvelu mobiilipelille. Pelissä siis näytetään mainos web-elementissä (WebView) pelin sisällä ja elementin koko on vaihteleva. Peli siis tekee HTTP-kutsun meidän omalle palvelimelle, joka pyytää mainoksen palveluntarjoajalta ja palauttaa tämän mainoksen puhelimelle.

Olen nyt yrittänyt muutaman tunnin selvittää tapaa mobiililaitteen viewportin selvittämiseen javascriptillä, mutta en ole löytänyt toimivaa menetelmää, sillä jokainen js-kikkare palauttaa sangen outoja resoluutioita. Javascriptin käyttäminen ei ole välttämätöntä, sillä HTTP-requestin yhteydessä voi kyllä välittää viewportin koon, mutta mainos pitäisi vielä saada näkymään oikean kokoisena.

Tässä on käyttämäni koodinpätkä:

$(document).ready(function() {
	var x = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
	var y = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
	$("body").html(x + "x" + y + $("body").html());
});

Android-laitteella (1280x720) viewportin kooksi tulee 640x287. Windows Phonella (800x480) kooksi taas tulee 480x245. Nämä on siis normaalilla selaimella testattuja "fullscreen" arvoja landscape-modessa.

Testilaitteissa sivulla käyttämäni 800x480 kokoinen testikuva ei näy kummallakaan laitteella oikeana kokoisena, vaan juurikin tuon viewportin mukaan (duh)...

Viewport metatagi:

<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,user-scalable=no,initial-scale=1.0">

Kannattaa sen jälkeen katsoa css tiedosto :D

Eli sinne käyttää vaikkaa CSS3 @media hyödyksi...

Tai sitten vain tunnistat resoluution pelin koodissa ja pyydät sen mukaan palvelimelta sopivan kokoisen mainoksen. Jotenkin outoa lähteä räpeltämään laitteen ulkopuolella, kun nyt on mahdollisuus kysyä suoraan käyttikseltä sataprosenttisen luotettavaa tietoa.

x = screen.width;
y = screen.height;

Pitäis toimia?

FINDarkside kirjoitti:

x = screen.width;
y = screen.height;

Pitäis toimia?

Eikös screen.width laske nimenomaan sen laitteen määritelty leveys, eli mun 1080p luuri näyttää "resoluutioksi" ~480p.

Lebe80 kirjoitti:

Eikös screen.width laske nimenomaan sen laitteen määritelty leveys, eli mun 1080p luuri näyttää "resoluutioksi" ~480p.

Niimpäs onkin, tämä toimii ainakin mun puhelimella:
x = screen.width * window.devicePixelRatio;
y = screen.height * window.devicePixelRatio;

Stackoverflow

The Alchemist kirjoitti:

Tai sitten vain tunnistat resoluution pelin koodissa ja pyydät sen mukaan palvelimelta sopivan kokoisen mainoksen. Jotenkin outoa lähteä räpeltämään laitteen ulkopuolella, kun nyt on mahdollisuus kysyä suoraan käyttikseltä sataprosenttisen luotettavaa tietoa.

Ongelma oli nimen omaan se, että oikean kokoinen mainos näkyi ruudulla väärän kokoisena. Sain ongelman kierrettyä asettamalla css img { width: 100%; }, jolloin näytön koon perusteella pyydetty kuva skaalautuu oikein.