[jQuery] Script niet uitvoeren bij mobile devices

[leroydev]

Hallo tweakers,

Ik ben een blog aan het maken en heb gebruikt gemaakt van het volgende jQuery scriptje om de achtergrond te laten uitrekken:

HTML:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://leroydev.nl/php/backstretch.js"></script>
<script>
$.backstretch("img/bg.jpg");
</script>

Nu wil ik het zo doen dat hij dat niet doet bij mobiele apparaten, daarvoor dacht ik dat dit wel zou werken:

HTML:

<script>
if ($(window).width() < 480 || $(window).height() < 480) {
$.backstretch("img/bg.jpg");
}
else {
jQuery.noop()
}
</script>

Ik heb alleen een iPod om mee te testen, de 3e generatie, die heeft een resolutie van 480x320, en die laadt nog steeds gewoon dat jQuery scriptje, en dus ook de achtergrond.

Zou a.u.b. iemand mij hiermee kunnen helpen?

[leroydev]

Hmm, misschien als ik < verander naar <= (Groter dan of gelijk aan), dat hij het dan doet..

Edit:
Nee, werkt ook niet.

[ Voor 19% gewijzigd door leroydev op 30-06-2012 12:49 ]

[NMe]

Window size gebruiken om te zien of iets een mobile device is, is nou niet bepaald waterdicht. Niet in de laatste plaats omdat telefoons met HD-ready schermen al een tijdje bestaan en er zelfs al telefoons zijn met HD-schermen. Het aantal pixels zegt vervolgens niks over de beschikbare hoeveelheid centimeters (zie de o.a. iPhone 4 met zijn retina-scherm).

Als je écht min of meer waterdicht wil controleren met wat voor device je te maken hebt, dan zou je kunnen kijken naar Modernizr.

Ablrecords schreef op zaterdag 30 juni 2012 @ 12:47:
Hmm, misschien als ik < verander naar <= (Groter dan of gelijk aan), dat hij het dan doet..

Edit:
Nee, werkt ook niet.

Als je denkt dat <= "groter dan of gelijk aan" betekent dan snap ik wel dat dat niet werkt ja, <= is "kleiner dan of gelijk aan".

[ Voor 26% gewijzigd door NMe op 30-06-2012 12:51 ]

[Strunkie]

Gewoon even zoeken naar dit door scriptjes aangezien sommige telefoons al hd hebben.
http://www.hand-interacti...ect-mobile-javascript.htm

[leroydev]

@NME
Ik zie bij Modernizr niks staan over het detecteren van mobile devices?

@Strunkie
Dan zit ik nog steeds met andere mobiele apparaten waarbij het nog niet werkt..

[leroydev]

Ik heb al een ander alternatief in mijn hoofd, gewoon users doorsturen naar een mobiele versie van mijn site, dus met andere HTML en CSS, en dat met behulp van dit script of een ander alternatief: http://detectmobilebrowsers.mobi/

Heel erg bedankt allemaal!
Hier kan een slotje op!

[Verwijderd]

Zonder een viewport meta-tag in je pagina geven mobiele devices een desktop resolutie terug. Mijn ipod (2/3e generatie) geeft 980x1091 pixels. Met deze meta-tag:

code:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />

Krijg ik 480x208 pixels (in landscape met adresbalk zichtbaar)

[NMe]

Ablrecords schreef op zaterdag 30 juni 2012 @ 12:54:
@NME
Ik zie bij Modernizr niks staan over het detecteren van mobile devices?

Modernizr.Touch is redelijk waterdicht. Developen voor het type telefoon/tablet dat geen touchscreen heeft lijkt me sowieso niet wat je aan het doen bent. Aan de andere kant zal de grote uitrol van touchscreen monitors niet ver weg zijn.

Ablrecords schreef op zaterdag 30 juni 2012 @ 13:00:
Ik heb al een ander alternatief in mijn hoofd, gewoon users doorsturen naar een mobiele versie van mijn site, dus met andere HTML en CSS, en dat met behulp van dit script of een ander alternatief: http://detectmobilebrowsers.mobi/

Dat is volgens mij browser sniffing en daarmee niet handig. Je loopt dan altijd een beetje achter de feiten aan.

Hier kan een slotje op!

Slotjes gaan alleen op slechte topics, niet op topics waar de topicstarter toevallig klaar mee is.

[ Voor 68% gewijzigd door NMe op 30-06-2012 13:32 ]

[Barryvdh]

Het ligt er aan wat je wil detecteren toch?
Met bij het gebruik van

code:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

krijgt mijn HTC One X een breedte van 360px, zonder die regel 980px (op mijn testwebsite).
Als ik dan test met

code:

alert('innerWidth: '+window.innerWidth);
alert('window width: '+$(window).width());
alert('Mq: '+Modernizr.mq('only screen and (max-width: 360px)'));

Krijg ik dus 2x 360 en daarna true (met 361 false). Voor bijvoorbeeld het wel/niet strechten van een achtergrond, lijkt me dit logischer dan of het nu wel/niet touch is.

[ Voor 7% gewijzigd door Barryvdh op 30-06-2012 14:20 ]

[R4gnax]

Ablrecords schreef op zaterdag 30 juni 2012 @ 12:40:
Zou a.u.b. iemand mij hiermee kunnen helpen?

Cascading Stylesheet:

body {
  background-image: url("background.jpg");
  background-size: 100% 100%;
}

html.no-backgroundsize body {
  background-image: none;
}

Gewoon CSS3 background-size gebruiken en devices die dit niet ondersteunen (gedetecteerd via Modernizr) krijgen de achtergrond niet te zien. (Of je kunt een andere achtergrond gebruiken. Jouw keuze...)

Evt. kun je ook nog device-width en device-height media queries gebruiken om verschillende gradaties in de resolutie van je achtergrondplaatje aan te bieden, zodat de achtergrond minder geschaald hoeft te worden en alles wat netter (scherper) oogt.

NMe schreef op zaterdag 30 juni 2012 @ 13:28:
Modernizr.Touch is redelijk waterdicht. Developen voor het type telefoon/tablet dat geen touchscreen heeft lijkt me sowieso niet wat je aan het doen bent. Aan de andere kant zal de grote uitrol van touchscreen monitors niet ver weg zijn.

Wat je zelf al zegt; touchscreen schermen staan om de hoek. Met de release van Windows 8 zou het wel eens storm kunnen gaan lopen met touch-capable monitoren bij nieuwe consumenten PCs. Niet slim om touch-ondersteuning te gebruiken als detectie middel voor mobile.