Mobiele apparaten uitsluiten in .js

[vinz98]

Ik heb het volgende stukje code:
Nu ben ik zo ver dat als ik de width verklein de functie wegvalt op de PC. Door display:none. Maar wat ik nu juist wil is dat de functie wegvalt op een mobiele telefoon. Mijn nexus5 is bv 1080 px breed dacht ik dus ik had 1081 ingevuld maar dat werkt dus niet.
Welk stukje code moet ik waar toevoegen om alle mobiele telefoons uit te sluiten van deze functie?


resizeBoom = function()
{

var boomHeight = $(window).height();
var boomWidth = $(window).width();
if(boomWidth < 640 || boomHeight < 480){
$('#corner_boom').css('display', "none");
}
else {
$('#corner_boom').css('display', "block");
}

}

[Borromini]

Als je je Nexus 5 in landschapsmodus gebruikt heb je gewoon 1920 pixels... Die is gewoon Full HD. Kan je niet zien hoe bv. Tweakers zelf mobiele apparaten detecteert?

[RobIII]

Niet met JS doen... nergens voor nodig. [google=css responsive media queries] > zat te vinden.

[ Voor 68% gewijzigd door RobIII op 22-09-2015 21:02 . Reden: Meer linkjes :P ]

[vinz98]

Ja daarom wil ik graag weten wat het commando is om, ongeacht de resolutie, mobiele apparaten display:none mee te geven. Ik heb op internet wel dingetjes gevonden maar dan werkt het hele script niet meer. oopsie

[Metian]

http://www.whatismyscreenresolution.com

Websites via mobiel gebruiken niet het schermresolutie. Dus landscape op Nexus 5 is geen 1920 pixels. Check bovenstaande link om de werkelijke pixels te zien.

[Ramon]

Het aantal pixels wat een scherm heeft is tegenwoordig niet 1 op 1 met het aantal pixels wat de telefoon rapporteert in de browser.

[vinz98]

dus is het slimmer om gewoon mobile devices uit te sluiten?

[Ramon]

vinz98 schreef op dinsdag 22 september 2015 @ 21:01:
Ja daarom wil ik graag weten wat het commando is om, ongeacht de resolutie, mobiele apparaten display:none mee te geven. Ik heb op internet wel dingetjes gevonden maar dan werkt het hele script niet meer. oopsie

Dat kan niet. Je zal gewoon op resolutie moeten afgaan.

[Metian]

vinz98 schreef op dinsdag 22 september 2015 @ 21:02:
dus is het slimmer om gewoon mobile devices uit te sluiten?

Hangt er helemaal vanaf wat je wilt uitsluiten. Maar belangrijk is te onthouden zoals eerder ook aangegeven, dit niet te doen met JS, je kan dit ook goed doe met alleen CSS

[vinz98]

Het gekke is dat als ik die <max-width verlaag op de PC het schermpje wel verdwijnt maar op mobiel niet. Al maak ik hem 10 px

[Biersteker]

Waarom zou je dat met JS doen?

Cascading Stylesheet:

#corner_boom { display:none; }

@media screen and (min-width: 641px) , screen and (min-height: 481px) {
  #corner_boom { display:block; }
}

sowieso hou ook reken met het verschil tussen $(window).height() en
$(document).height(), als je het toch met Jquery doet.

[ Voor 28% gewijzigd door Biersteker op 22-09-2015 21:14 ]

[Ramon]

Hier heb je de door de browser gerapporteerde sizes voor een aantal telefoons: http://www.cssmediaqueries.com/target/

[vinz98]

Ik ga het proberen Biersteker

[vinz98]

Nee, dat is niet gelukt. Ik had eerst de code toegevoegd aan het einde van de css file. Alles bleef overal in beeld. Daarna uit de .js het hele stukje code weggehaald. Toen was alles overal weg. Wat doe ik verkeerd.

[Ramon]

misschien kan je eens wat code laten zien of een testcase op jsfiddle zetten? http://jsfiddle.net/

[vinz98]

Oh jee, dat kan ik allemaal niet...Ik probeer een slecht werkend script aan te passen. En, het is mijn eerste keer...dus dit is een lesauto voor je neus. haha

[vinz98]

dit is de css
.boom_embed_container {
width:100%;
height:auto;
padding:10px 0;
margin:0 auto;
}
.boom_embed_input {
float:right;
width:60px;
padding:4px;
}
.boom_embed_input_large {
float:right;
text-align:right;
width:150px;
padding:4px;
}
.boom_embed_button {
width:96%;
padding:5px 2%;
font-size:15px;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
.boom_embed_full {
width:100% !important;
}
.boom_embed_menu_button {
border-radius: 5px;
margin-bottom: 3px;
padding: 4px 0;
text-align: center;
width: 49%;
}
#boom_embed_top_menu {
margin-bottom:10px;
}
.boom_embed_left {
float:left;
}
.boom_embed_right {
float:right;
}
#boom_embed_menu {
margin-top:8px;
}
.boom_embed_textarea {
width:100%;
min-width:100%;
max-width:100%;
height:170px;
min-height:170px;
max-height:170px;
clear:both;
padding:4px;
}
.boom_embed_textarea_head{
width:100%;
min-width:100%;
max-width:100%;
height:50px;
min-height:50px;
max-height:80px;
clear:both;
padding:4px;
}
.boom_embed_p {
padding-top:10px;
padding-bottom:5px;
}
#boom_embed_form2, #boom_embed_code2, #boom_embed_form3{
display:none;
}
.boom_embed_warn {
color:orange;
}
.boom_embed_left {
float:left;
}
.boom_embed_right {
float:right;
}
.boom_embed_full {
width:100% !important;
}
.boom_embed_h3 {
padding-top:5px;
}
.boom_embed_help_item {
padding-bottom:5px;
padding-top:5px;
}

[RobIII]

vinz98 schreef op dinsdag 22 september 2015 @ 21:16:
Oh jee, dat kan ik allemaal niet...Ik probeer een slecht werkend script aan te passen. En, het is mijn eerste keer...dus dit is een lesauto voor je neus. haha

Ja, allemaal leuk en aardig maar we zitten hier niet om handjes te houden. Als een testcase opzetten al teveel moeite is (en trust me, 't is écht geen rocketscience) en we het hier met een slowchat moeten gaan oplossen dan maak ik er een einde aan. Je hebt voldoende info, google termen en zelfs links naar kant-en-klare tutorials gekregen en daarmee moet je er prima uit komen. Als je geen zin hebt om dat te lezen (wat je nooit gedaan kunt hebben in die tijd) zie ik niet waarom wij wél tijd/moeite zouden moeten investeren.

Tip: als je code post, gebruik dan voortaan code tags a.u.b.

vinz98 schreef op dinsdag 22 september 2015 @ 21:17:
dit is de css

Ik zie helemaal geen media queries in je CSS

Tot slot: Gebruik a.u.b. de wijzig-link (rechtsbovenaan je post) als je iets toe te voegen hebt; je topic herhaaldelijk omhoogschoppen is niet nodig en die melding staat er niet voor niets:

[ Voor 67% gewijzigd door RobIII op 22-09-2015 21:22 ]