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
Related
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.
We have a website designed for mobile, and its appearance and operation are awful on desktop. I want to make a change to the CSS or javascript/jquery of the website so that it will be rendered good on the desktop. for example by something like this:
#media only screen and (max-width: 500px) {
body {
width: 500px;
background-image: * ;
}
}
One of the problems to be solved is that the vw's used to make the display responsive for different mobile sizes would be so big on the desktop that would mess everything.
please help thank in advance
Vw or viewport width is a percentage of the screen size. (So 10vw is 10% of the screen's width) Which means that vw always keeps the same size ratio regardless of what screen it is on. If you want to change a certain css element's size when screen width exceeds a certain size in px than add a new media query with a minimum width of a desktop screen. For example 1920px.
You can try search for ideas in bootstrap's classes and methodologies, like using different class modifiers for different screen sizes (col, col-md, col-xl, etc)
As Jalen said, you might want to look into inserting media query and breakpoints at sizes that you find less usable, and optimize those.
From experience, making an existing app reactive (meaning that it can run in both enviroments with a single codebase) can be daunting, but with few changes in css and templates you might be able to achieve it
Consider the following site: 200minus.com
This site looks good on both a mobile phone and a desktop. It's as if when you view the site on a mobile phone, everything is appropriately shrunken. Where in the source code (HTML/CSS/JavaScript) is this being dealt with (or is this typically dealt with)?
In the CSS as media queries.
You can adapt the layout of CSS styling, depending on what size the browser window it's being viewed with is.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries, and
the official W3C documentation: http://www.w3.org/TR/css3-mediaqueries/
Theres 2 typical approaches to page design in mobile/desktop situations.
Adjust the page to suit the size of the display at load.
or...
Make the page respond to it's size dynamically( This is referred to as responsive design).
It is considered good form to use responsive design, as it has obvious advantages for screen resizes. Such as if a tablet/mobile was rotated or if a desktop user resized their window.
A good design should be implemented predominately in css as it is the fastest part of the page to update/ evaluate, and is simpler to implement than modifying the page style than JS. Proportional layout and forward planning help considerably when it comes to producing a layout that works well on many screen sizes and many guides will instruct you to design for mobiles first, then adjust for desktop sites. Personally I try to think of them as one part that is never a fixed size.
The bread and butter of responsive design is media queries; they allow you to only active certain css rules under one or more conditions. For example:
#media (min-width:650px){
.about_tablet{height:175px;}
}
#media (min-width:650px) and (max-width: 675px){ /* both conditions must be met */
.about_tablet{height:175px;}
}
#media (min-width:650px) , (max-width: 675px){ /* one or both conditions must be met */
.about_tablet{height:175px;}
}
Another very useful trick is viewports
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width" />
They can be a little strange, behaviour isn't uniform across older mobile devices and they don't work at all on desktops, but they are quite useful. You can force a page width and scale the page on a pixel by pixel basis (800 px image on a 400px wide screen for instance). Prevent the user from being able to zoom in, or limit the zoom. Most useful is the width=device-width" which prevents the horrible zoomed out effect you get on non optimised webpages when you view them on a phone.
If theres a more specific concept you want to talk about I'm happy to help, a vast majority of my work is done for mobiles.
This is simple Bootstrap. Just try it out! I think it's really good. Also mentioned in the answer above this is everything done with CSS. For example this:
#media (min-width:768px){.container{width:750px}
}
#media (min-width:992px){.container{width:970px}
}
#media (min-width:1200px){.container{width:1170px}
}
When the width is smaller than 992 px the container will be set to 750px.
Greetings
In CSS using media queries, as explained here:
http://css-tricks.com/css-media-queries/
For example:
#media screen and max-width:600px { /* CSS here */ }
Is a common brakepoint that I use.
For some specific handling I've found I have to use javascript or jQuery to really get the effect I want, but generally CSS media queries and some intelligent and creative use of showing/hiding objects with the display property will get you 99% of the way there.
I have my site HEAVILY modified via #media queries to display very slimdown'd on mobile phones. However, my users are asking for the desktop version of the site (available via a link).
To go a step further, the desktop site itself also gets modified by #media queries depending on resolution. I was thinking of picking one 'desktop' resolution, say 1440x900 and forcing the mobile phone to display at that resolution?
Is this possible, maybe through JavaScript? Alternatively, can these #media queries be disabled altogether?
Thanks!
I had the same issue with a client. But the problem was there were 120+ CSS files contained the media queries. So what I did is, set the viewport width. I have used this snippet on that site and working fine. Using this, even you can give the option for the users to toggle between responsive design and non-responsive design.
$(document).ready(function(){
$('meta[name="viewport"]').prop('content', 'width=1440');
});
Note: 1440 is your preferred screen width.
Hope this helps :)
I would add a class to your <html> or <body> such as class="force-desktop" and then on your media selector add
#media () {
body:not(.force-desktop) {
//styles
}
}
or something similar
The solution of IJas without JQuery looks like:
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', width=1440);
Its easiest to put any styles that may need to be disabled in their own stylesheets, with title attributes to make finding them easier. They can be inline style or link elements to .css files.
function toggleSheet(title){
var S=document.styleSheets, L=S.length, temp;
while(L){
temp=S[--L];
if(temp.title===title){
temp.disabled=!temp.disabled;
return temp;
}
}
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.