-1

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?

moshfiqrony
  • 4,303
  • 2
  • 20
  • 29
bardia riahi
  • 63
  • 9
  • Do you mean a small section of the page? Or the entire page html is different between mobile and desktop? – Ari Seyhun Jan 05 '22 at 07:15
  • This might answer your question. https://stackoverflow.com/q/6850164/10490282 – Chandan Mahto Jan 05 '22 at 07:15
  • @AriSeyhun I want to show my mobile page something with 100% deferent between Desktop des please visit digikala on google in desktop size and inspect and change to mobile and refresh it – bardia riahi Jan 05 '22 at 07:18
  • 1
    if you want to serve completely different HTML, it's something usually your backend would do by detecting the users `User-Agent` information. Doing this in pure JS on the frontend isn't usually recommended, it'll add an extra delay before your user receives the correct content. – Ari Seyhun Jan 05 '22 at 07:21
  • Keep in mind that the answers given are for changing *styles* with media queries. But if you want to develop two separate websites, one for mobile and one for desktop, you should detect it from the backend before serving. This can be done in nginx, or whatever else you may be using to serve your website. – Ari Seyhun Jan 05 '22 at 07:23

6 Answers6

1

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

Mrinmoy Haloi
  • 143
  • 1
  • 7
0

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
}
cediwelli
  • 370
  • 1
  • 8
0

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

Here is to handle it with JS,

Reference:

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

Eko Muhammad Rilo Pembudi
  • 245
  • 3
  • 12
0

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.

Davy
  • 6,295
  • 5
  • 27
  • 38
0

Try using media queries,

For mobile:

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

For Laptop/Desktop:

@media only screen and (min-width: 992px) 
{
}
lakshna S
  • 255
  • 1
  • 5
0

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

bardia riahi
  • 63
  • 9
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 08 '22 at 11:54