0

I determine via Javascript if the User is using a mobile or a Desktop Device. If he is using the Desktop Device, they should be shown the Desktop Versions of the Website, if he is using a mobile Device it should display the mobile Application. Now I'm just hiding the HTML part that is not needed with CSS but I want to get rid of this part due to loading times.

Now I want to know how I can decide by javascript which HTML Code should be loaded?

Thanks in Advance

vizsatiz
  • 1,312
  • 1
  • 11
  • 23
Libero7
  • 3
  • 2
  • 7
    The whole idea of responsive webdesign is **one document** - that is, all devices get the *same* document. – connexo Sep 11 '18 at 12:25
  • use bootstrap, any device any brawser any size , does not matter now, – Ahmed Sunny Sep 11 '18 at 12:28
  • Or use any of the multitude of other responsive css frameworks – charlietfl Sep 11 '18 at 12:29
  • "Desktop" vs "Mobile" is a terrible distinction. What do you really care about? Viewport size? Touch Vs Pointer Vs Linear access? Internet connection speed? Internet connection cost (metered vs unmetered)? Internet connection reliability? Something else? – Quentin Sep 11 '18 at 12:42
  • Maybe it was a littlebit unclear, but its about if the user enters the page with a mobile device, the web app should be displayed (completly different layoutnot just responsive version of the desktop website) - Otherwise it should display the dekstop website which is responsive aswell. I Know how to dtermine which device he uses, but i want something like
    – Libero7 Sep 11 '18 at 13:12

3 Answers3

1

I think media queries are the answer or you can use JavaScript of: 

window.screen 

AvailableWidth = screenWidth;
AvailableHeight =screenHeight;
marc_s
  • 675,133
  • 158
  • 1,253
  • 1,388
Nancy256
  • 43
  • 7
  • I'd say, just go with CSS. Considering Js for this is heavy and least effecient. – Sarath Damaraju Sep 11 '18 at 12:38
  • My Problem is not about determine if the device is mobile or not, its about to load specific html only if device is mobile like
    – Libero7 Sep 11 '18 at 13:13
  • Use media query and set the div that contains that html you want to show at a certain width or height and set to display block when that height is on ...simple! – Nancy256 Sep 11 '18 at 14:16
-1
@media only screen and (max-width: 600px) {
< your css >
}

Refer to https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries

peoples
  • 128
  • 1
  • 10
  • width of phone resolution is now greater then 600px so this case wont work, for example s9 has 2,220 x 1,080 pixels – Ahmed Sunny Sep 11 '18 at 12:40
  • Therefore are additional attributes...check https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ – peoples Sep 11 '18 at 12:41
-1

I don't think you're too far off. I wouldn't have done it this way though and as others suggested I would have looked at making your HTML responsive. With that being said, you should (simply) reverse your logic. instead of a full page where you hide elements, you should start with a blank page where you inject HTML.

https://codepen.io/chancet1982/pen/VGxZyO

var btn = document.createElement("BUTTON"); // Create a <button> element
var t = document.createTextNode("CLICK ME"); // Create a text node
btn.appendChild(t); // Append the text to <button>

function myFunction(x) {
    if (x.matches) { // If media query matches
      document.body.appendChild(btn);        
    } else {
        //Do something else..
    }
}

var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
Samuel Bergström
  • 1,639
  • 10
  • 8