How to show two html output for mobile and website?

Question

I want to have 2 different outputs for mobile and desktop how I must handle it with javascript? for example

first i check the device width if width <= 700 px is mobile = true and show mobile output(html,js,css) else mobile = false is mean device is a desktop and show desktop output (other html,js,css)

how I can do this?

Answer 1

user agent is work in react js and in js window.screen.width

Answer 2

If you must handle it through JavaScript, you can use the window.screen.width and window.screen.height properties to check the devices height and width. But as a Comment already suggested, you might want to look into media-queries in CSS they are pretty powerful.

Possible usage

if(window.screen.width <= 700) {
    // do mobile logic
} else {
    // do desktop logic
}

Answer 3

You can use media query to handle what will do by its screen size.

Here is to handle it with JS,

Reference:

• https://www.w3schools.com/howto/howto_js_media_queries.asp
• https://css-tricks.com/working-with-javascript-media-queries/

And here is when you want to handle with CSS, you can follow this link

• https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 4

you shouldn't use javascript for this work. You should use css media queries. Take a look at this

Answer 5

Search around on google for "responsive design". It is a better way to do what you want.

A good starting point:

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

Also, magically showing different content for different clients might hurt your search engine rankings, and will make testing your website more difficult.

Answer 6

Try using media queries,

For mobile:

@media only screen and (max-width: 600px)
{
}

For Laptop/Desktop:

@media only screen and (min-width: 992px) 
{
}