This question already has answers here:
Detecting a mobile browser
(46 answers)
Closed 2 years ago.
When I presume that a css media query with max-width: 768px can make my web page responsive to fit a mobile device. However, iPhone X and later still load the desktop version, because recent phones have even higher resolution than an old desktop.
How do I detect a mobile device not relying on the screen resolution, with Vanilla javascript, pure HTML and CSS?
Pixels don't actually work based on the real density of the screen. The pixels we use are Density independance and the get scalated depending on the screen. If you follow up the media query Bootstrap uses you can see they actually set it as max-width: 575.98px for mobile devices.
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
#media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
#media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
#media (max-width: 1199.98px) { ... }
Related
I have created 2 different versions of my website, one for laptop screen size and one for mobile screen size (tablet screen size, on the way). So, I was wondering if you could tell me how am I supposed to use javascript (because I have a feeling that it could be done through javascript) in order to have as a main webpage file the one that is supposed to be for laptops and in case the user opens my website through their mobile, the file that will open will be the one for mobile size screens. I hope you get my question.
Thank you very much in advance!
PS: I read something about #media but still trying to figure things out.
PS2: If you need me to post any code, let me know which part you might need and I will gladly post it.
You can use media queries to import different CSS files, depending on screen size.
This will work without javascript and would be the prefered approach in my opinion.
Your site could have the following code in a tag in the header:
/* Everything 1000px and lower */
#import url("./mobile.css") only screen and (max-width: 1000px);
This will load another stylesheet if the media query is satisfied.
You can read more about media queries here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Use media queries in your CSS file:
#media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
Examples and more, here
when it comes to responsive, avoid as much as you can javascript, you can do it with css media queries, you can learn more about it here:
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
or you can go for the framework approach, bootstrap for example.
I think if you use bootstrap, you can easily manage you requirement quickly.
Please refer following link to get idea -
https://getbootstrap.com/docs/3.3/css/
You can use media query to handle css on you web page
// For Ipad Portrait and Landscape
#media screen and (min-width: 768px) and (max-width: 1024px) {
}
// For iPhone and smaller devices
#media screen and (max-width: 767px) {
}
also to handle javascript you need to use device width in jquery
if ($(window).width() < 767) {
alert('Less than 767');
}
else {
alert('More than 767');
}
I have been doing some research on media queries and I understand the concept of mobile-first design.
I know, that there are lots of questions regarding media queries but none of them targets my specific question.
Also I understand the concept of structuring your stylesheets with media queries like this:
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) { ... }
However I really need a way for my stylesheets to target only tablets regardless of the browser resolution (width & height). Checking the browser-width is simply not safe enough (and definitely not what I am searching for) in 2015 where some tablets have a bigger resolution than older desktops.
Here is a list of things I have tried so far:
I made a list of "common" tablet-resolutions and simply specified
detailed media queries. This approach failed after I found tablets
with 1024px width (which is the same as older desktop browsers).
I read a lot about media queries and found out that modern browsers (especially on tablets) sometimes ignore specifications like "#media only screen" and that most values of a media query are deprecated.
1.) Is there a safe way to target tablets regardless of their resolution with media queries?
2.) Is there any way to use JavaScript/JQuery to find out if the Browser is used on a Tablet (touchscreen)?
Maybe there is a certain css property OR JavaScript function that is only "triggered" on tablets (I am out of ideas)? Thank you for your help.
You can use this:
#media only screen and (min-device-width: 768px){}
For ref : Media Queries: How to target desktop, tablet and mobile?
Short answer: no.
I would say, what is a tablet nowadays? Some phones are so big that they seem more like tablets and some tablets are so small that they overlap the bigger phones market...
So I would say, go for feature detection, target the features that you are interested in, and the best way for me, apart from media queries, is Modernizr.
You can take a look at their custom builds page and literally pick the features that you are interested in (touch events? geolocation?), knowing that you got the support of a reliable, well tested library.
I've got my responsive website done with breakpoints setted up with #media queries. I've got couple of basic breakpoints
min-width: 1600px - for TVs and bigger resolution screens (that just center the whole page and make white margins on sides, nothing too significant)
max-width: 1024px - for tablets, there are many changes, especially because tablets has of corse touch screen, which desktops usually haven't. At all it looks pretty different.
max-width: 600px - for smarphones, there is also a lot of changes based especcialy on narrowing the content from two or four colums into one.
Now I found that might be a problem, because there are nowdays tablets which acts in the browser, as they have resolution width for example 1280px, but there are also still computers with width of monitor 1280px too, even smaller, so I can't change the breakpoint value for this.
I of course don't want the desktop version on tablet and tablet version on comuter, becase they're created not as much for resolution but more for the platform.
I know that there are things called user agents like WURFL, which seems to be perfect for this. But is there any way how to connect this value from WURFL (tablet, desktop, smartpohne...) with css #media queries.
For example detect in WURFL that the device is tablet and change the breakpoint value in CSS file, so it shows the tablet version, instead of desktop version? Or is there any other way with similar result as this theoretical solution?
There is no need identify the device, just use the right media queries.
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
I think you are looking for this
jQuery code to detect mobile devices
http://www.webtrainingcentre.com/jquery/scripts/jquery-code-to-detect-mobile-devices/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
These days people are using various screen sizes to view websites. I need to figure out how to set up a dynamic website width which can automatically change with the screen size. I created a website with 1200px wide. The website and the content is too big for my laptop screen. But it is more suitable with my other monitor due to it is big in size. Can I adjust that width to change dynamically with the monitor size of the user?
You can use CSS media queries for this. (note: older versions of browsers won't support)
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen).
More specifically, it will look at the following:
height and width of the device height and width of the browser
screen resolution orientation of the device (for mobile phones and
tablets; portrait or landscape)
CSS2 allows you to specify stylesheet for specific media type such as screen or print.
Now CSS3 makes it even more efficient by adding media queries.
You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices.
It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content.
Example:
The following CSS will apply if the viewing area is smaller than 600px.
#media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
If you want to link to a separate stylesheet, put the following line of code in between the <head> tag.
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
Multiple Media Queries:
You can combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.
#media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Device Width:
The following code will apply if the max-device-width is 480px (eg. iPhone display). Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.
#media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
Also this is a good article to read on resolution specific stylesheets on css tricks
I am developing a phonegap application for Android and I have designed the UI using jquery mobile. I want know what is the best way to alter the font-size of the text for different devices dynamically using css or javascript.
Media queries are your friend!
In your CSS doc, use code similar to below (example is for the iphone 3-4 + Retina):
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (max-device-height: 480px) and (orientation:portrait) {
p {
font-size: 12px;
}
}
You'll need to provide a few such queries to target the majority of devices (ipad, iphone, etc) but that should get you started!
Take a look at media queries. For instance, the nested CSS rules here will only apply to devices which are at least 500 pixels wide:
#media (min-width:500px) {
#main {
font-size: 15pt;
}
}