We Keep Coding

how would i make a site appear completely different when on a mobile device

pretty much i have made a website that looks great on desktop, but looks absolutely awful on mobile, so im going to write a version that is the same level of quality as the desktop version.
however i have no idea how to do this, i have looked it up and i have found one thing telling me to use the following code;
<script>
if ("ontouchstart" in document.documentElement)
{
// content for touch-screen (mobile) devices
}
else
{
// everything else (desktop)
}
</script>
i want to put html in where the comments are, but I dont know how too.
Any help?

You're going to want to write media queries in your css file. You might have to get creative with some of the styles that are currently on your site but this is generally how you would go about changing the look of a page for mobile devices.
#media (max-width: 767px) {
css styles that need to be altered for mobile go here!
}
You can also use min-width in the media query to apply stiles to large screens only.
#media (min-width: 767px) {
css styles that need to be altered for destop go here!
}
And also there are ranges.
#media (min-width: 360px) and (max-width: 767px) {
css styles for screens within this range go here!
}

You have to come up with a design for the mobile, not just trying to make it fit on the screen. You can achieve the responsiveness using CSS screen media queries. Media queries basically takes the browser current resolution (be it desktop or any devices) and it will automatically adjust the changes you made (like layout changes) based on what you assigned to the media queries. And you can also look up for CSS frameworks like bootstrap and tailwind, they have an amazing responsive/fluid component built in.

How to show two html output for mobile and website?

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?

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

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
}

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

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.

Try using media queries,
For mobile:
#media only screen and (max-width: 600px)
{
}
For Laptop/Desktop:
#media only screen and (min-width: 992px)
{
}

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

Different desktop and mobile view - what approach is the best?

I got a WWW website project where mobile version is the same as mobile app but "desktop" version is completely different. Different nav, different cards, views divided in different way..
What is the best approach to do this in PHP/Laravel and HTML/CSS/JS? I'm asking about general approach.
Thank you in advance.
K

This should be done through css using media queries by doing this you can control the cards sizes and views depending on the device size. You can find more information https://www.w3schools.com/css/css_rwd_mediaqueries.asp

The 'trick' I use for that is using a different css stylesheet.
You can set a min and max for your css styles, f.e.:
#media (max-width: 600px) {
//put css here for very small screens
}
#media (min-width: 601px) and (max-width: 1024px) {
//put css here for medium sized screens
}
#media (min-width: 1025px) {
//put css here for large screens
}
Note that this only works if your html stays the same over all screens and the layout is only defined by different css. But in certain situations this is a possible approach.

But differences are huge and in my opinion using only CSS is not enought. Changing size of elements and position in grid is obvious and exist in all projects. This is some kind of edge case.
For example on desktop I have user profiles in one view with 2 sections but on mobile I have two dedicated subpages.
In desktop I have normal menu in nav bar but on mobile each view have on top and bottom contextual buttons.
In desktop some things are in modal but in mobile in separated subpage or as a appearing text label (simple status).
...and so on

Detect large and low-resolution (TV) screens

My Web application is meant to be used on desktop computers and also on computers that are connected to TV screens.
I would like to apply different styling in these two different cases, but simple media queries do not work here: TVs resolutions are even smaller than computer monitors, even though the screen is much bigger.
Is there any way to detect such a scenario and apply proper styling ?

there is a CSS media query to check if the client screen is a tv
#media tv
(instead of #media screen for a classic computer screen).
There is also #media projector.

Suggest to take a look at CSS Units, especially the ones beginning with v, which are relative to the viewport's size...

Showing content based on screen resolution

I have a website with some content. Based on the users screen resolution i want to show different content so that mobile devices will have some other content, but the rest of the site will be the same. I did some research, and it seems like the only possible way is with javascript. I code PHP most of the time, so i really suck at javascript, so it would be nice if someone could provide me with a simple script.
What i need is a javascript function like this:
if (screen resolution < X x X) {
show some content...
} else {
show some other content ...
}
If javascript is off, it should just show some other content.. :) I can install jquery if it helps. Thanks
It would be nice with examples for the html code too.

you should NOT detect if the user is on a mobile device with javascript. i recommend you this in PHP. you can use [$_SERVER'HTTP_USER_AGENT'] and then simply parse out the string to see what kind of user agent it is. I am actually implementing this same concept right now.
you can also use this class Mobile Detect
include("Mobile_Detect.php");
$detect = new Mobile_Detect();
if ($detect->isMobile()) {
// any mobile platform
}

Check out CSS at-rules. They allow you to specify maximum and mimimum widths for a "namespace" of CSS rules, inside which you can have different rules for smaller screens. But be careful when using those, since IE doesn't like to support good things.
#media screen, projection and (max-device-width: 800px) {}
#media screen and (max-device-width: 300px) {}
On a project I'm working on, we actually redirect to a mobile version of the page if the user-agent contains certain keywords(check out the HTTP headers from JS), and use a different stylesheet completely.

You can use css media queries to target different screen resolutions. eg:
#media only screen and (max-device-width: 1024px) and (orientation: landscape) {
/* iPad in landscape orientation css */
}
#media only screen and (max-device-width: 480px{
/* iPhone css */
}
More info:
https://mislav.net/2010/04/targeted-css/
https://webdesignerwall.com/tutorials/css3-media-queries

you should try CSS media queries instead

In don't know from PHP but in .Net you can kinda detect that they are a mobile visitor and then you can redirect them to a mobile section of the site.
Then all you really need to do is write the small site re-using your existing web controls etc. Again, unsure if you have that concept in PHP but I imagine you would.