I am looking for the perfect way to detect tablets. With media queries you can set min- and max-widths for specific CSS. But there are tablets that have higher resolutions than soms desktop monitors. So that will give a conflict.
With Javascript (Modernizr, Detectivizr) tablets are recognized and sets this in the HTML with a class 'tablet' on the HTML tag. But... Not all users have Javascript enabled.
So what you want is (in my opinion) use CSS to detect tablets. Does anyone know the perfect solution for this?
Thanx in advance!
You can check against the navigator.userAgent, but its JavaScript, like this:
var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);
EDIT
I found this:
#media only screen and (max-width: 760px) {
/* Styles for phones */
}
This seems to detect if the width of the browser is the size of a smartphone.
See the answers in this question for more info
You can obtain a reasonable degree of accuracy by using CSS media queries:
#media only screen
and (max-device-height : 768px)
and (max-device-width : 1024px)
{
/* CSS Styles go here..... */
}
The above should detect when the device screen size is less than 1024x768 (a common screen size for desktops).
As you have stated above it is not perfect if you just use CSS because some tablets have a screen size larger than 1024x768.
The only way that I know of to increase the accuracy is to use javascript to sniff the userAgent string. See the question that GeenHenk linked to (What is the best way to detect a mobile device in jQuery?).
What about using mobile-detect.js? I've just utilized it for my project - it's got nice .tablet() method.
UPDATE (for maxshuty)
I'm using it in the following way:
var md = new MobileDetect(window.navigator.userAgent);
if( md.tablet() || !md.phone() ) {
// your code here
}
Related
I'm really new in coding and I created my first page ever with html and css. The thing is, I'm struggling with making the page responsive.
I know that I have to add the #media query and that, but, once I add it, I don't know which parametres should I change (text, etc) and I can't see how the result would be since I'm using a computer.
I would like a clear explanation or some examples because I've been looking up on Internet and I'm still very confused.
https://codepen.io/jomby/pen/NWvVNpQ
NW vVN p Q
This is the link to my page. In this case, when I see the page on the phone, the text stretches a lot and also the gallery.
Maybe you could tell me how would you make this example responsive so that I can learn that way.
Thank you very much in advance, for your time and patience!
The way you work with Media Queries is by:
Decide what to do first, mobile or desktop
After you do it, start by coding your webpage and once you finish you start adjusting your screensize and see what elements get misconfigured.
Here are some patterns you can follow, however you're not enclosed to configure your settings in these sizes:
#media only screen and (max-width: 1200px){
/*Tablets [601px -> 1200px]*/
}
#media only screen and (max-width: 600px){
/*Big smartphones [426px -> 600px]*/
}
#media only screen and (max-width: 425px){
/*Small smartphones [325px -> 425px]*/
}
So yet again I find myself pulling my hair over responsive images. The CMS gives me its srcset, I build a simples sizes attribute, I check the currentSrc by hover-fumbling over the attribute in Dev Tools– wrong Src! Go to 10, change a media condition maybe, save, reload, hover, repeat until it kinda works. Hope it will never fail for other images.
There must be a better way to do this? Considering that Firefox is still better than Chrom* at debugging Webfonts and that only today I have found Add device pixel ratio in Chrome's Dev Tools, I wonder if I'm overlooking something. I know of & have used placeholder images, but they can be a pain to set up and they can't tell me
is the sizes attribute syntactically correct?
how many device pixels does the browser consider the image to be in the current viewport? How many "srcset w-pixels" is that?
and most importantly: which media condition matches the current viewport? Why?
EDIT: came up with this example, hope it helps:
<img
src="foo.jpg"
sizes="(max-width: 599px) 100vw, ((min-width: 600px) and (max-width: 1000px)) 33vw, 300px"
srcset="foo_a.jpg 300w, foo_b.jpg 768w" />
Viewport at 650px, device-pixel-ratio 1.
DevTools tells me:
currentSrc == "foo_b.jpg"
Why? Which condition is this? What does 33vw end up as? 650px*33/100? How does it relate to 300w? How is this closer to 768w?
Please note that I'm not really asking about these specific values, but a general workflow.
EDIT2: I am probably asking for a Dev Tools feature (or extension) that would tell me, in this case:
Viewport 650px
matches ((min-width: 600px) and (max-width: 1000px))
650px # DPR 1.0 = 650w
=> 33vw = 650w*33/100 = 214.5w
closest src = foo_a.jpg 300w
BUT, I have foo_b.jpg in cache
pick foo_b.jpg
is the sizes attribute syntactically correct?
In your case no. Outer parens on ((min-width: 600px) and (max-width: 1000px)) appear to be extra.
how many device pixels does the browser consider the image to be in the current viewport? How many "srcset w-pixels" is that?
If you know your device pixel ration (DPR), you can use that value to divide real image width (w value in srcset) to get pixel width that will image occupy on screen.
Browsers know this from srcset and sizes attributes you provided and take it into account when deciding which image to use.
and most importantly: which media condition matches the current viewport? Why?
Media queries in sizes attribute work exactly same as CSS media queries. So first valid media query, reading from left to right will be applied. Funny thing browser does (Chrome at least), if one query between set of commas is invalid it won't invalidate whole sizes attribute, just that query.
You can test this by applying those same set of media queries in CSS, like so (note I'm using Sass):
body {
#media (max-width: 599px) {
&:before { content: "max-width: 599px"; }
}
#media (min-width: 600px) and (max-width: 1000px) {
&:before { content: "(min-width: 600px) and (max-width: 1000px)"; }
}
In case of your second query, my linter reported invalid format until I removed outer parens. That's how I knew about your first point.
My test example: https://codepen.io/teodragovic/pen/eXjPoz
Good reference article: https://ericportis.com/posts/2014/srcset-sizes/
I need to do some scaling of the page and prevent it from closing in when keyboard shows up on mobile devices. Also it should work on a wide range of screens. To do so I use viewport meta tag. I figured a workaround where I fix the innitial-scale, maximum-scale and minimum-scale to one value which I calculate in JS. Is there a way to calculate this value and assign it in CSS? Can, and should I access meta tag from css? I've actually tried to do that but it didn't seem to work. Code below:
JS:
if (screen.width<1024){
var a = screen.width/window.innerWidth;
var txt = "width=device-width, user-scalable=0, maximum-scale=" + a + ", minimum-scale=" + a;
document.getElementById("viewportMetaData").setAttribute("content", txt);
}
HTML:
<meta name="viewport" id="viewportMetaData" content="user-scalable=0">
CSS:
#media all and (max-width: 1024px) and (orientation: landscape) {
#viewport {
min-zoom: width/(100*vw);
max-zoom: width/(100*vw);
user-zoom: 0;
}
Meta tags are not meant to be changed or affected by Css Classes. That is in contrast with the definition of Meta tags (https://www.w3schools.com/tags/tag_meta.asp).
However, if you want to solve your issue, you may be adding an event listener to the main window using javascript and whenever the window is resized, it changes the viewport value.
The answer to your second question is no, you shouldn't. But it will probably be more useful for you to try understanding the relationship between the viewport tag and media queries, which you can learn more about here. Also, as to deciding how to approach viewports vs. media queries during development, you may find these answers helpful as well.
As to your first question, without seeing your exact issue, it's hard to point to a specific solution. However, if this is mostly an Android issue, the following media queries may be useful in resolving your screen-width issue while the keyboard is present:
Portrait view:
#media screen and (max-aspect-ratio: 13/9) {
/*
focus on element styles in portrait view, not meta tags
*/
}
Landscape view:
#media screen and (min-aspect-ratio: 13/9) {
/*
focus on element styles in landscape view, not meta tags
*/
}
I have a font problem. I have to change the font color on mobile devices but I am unable to do this. Do you know how I can do this?
Update: I want a different color for mobile devices than desktops and laptops.
You can:
Use CSS Media queries
#media screen and (max-width: 400px){
p {
color: red;
}
}
NOTE: You can choose & specify the max-width & styles specific to the max-width yourself.
Use jQuery to detect mobile devices & change the color of specific elements.
if ($(window).width() < 400) {
$('element').css( "color", "red" );
}
The best way to detect a mobile device is to know its width and use the corresponding media query to catch it.
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I'm just wondering if it is possible to target a tablet without using media queries. The reason I ask this is that I already using media queries but I have images that are grayscale on desktop and when hovered they change to the original colour. I have removed the grayscale when the device hits a certain size so it is fine on smaller tablets and mobiles but it is just a bit too small for the ipad and certain tablets when they are landscaped.
Is there any way to target the tablet to turn the filter off without touching the media queries?
Thanks in advance
The website in question is www.garethjweaver.com
Have a look at the Mobile ESP framework; specifically the JavaScript one. It can detect individual devices or groups of devices such as tablets.
http://blog.mobileesp.com/
The method most pertaining to what you want to achieve is:
MobileEsp.DetectTierTablet();
It also allows you to pick specific groups of tablets by OS:
MobileEsp.DetectAndroidTablet();
MobileEsp.DetectWebOSTablet();
MobileEsp.DetectIpad();
MobileEsp.DetectMaemoTablet();
MobileEsp.DetectBlackBerryTablet();
MobileEsp.DetectOperaAndroidTablet();
A possible usage scenario:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://www.hand-interactive.com/js/mdetect.js"></script>
<script>
$(function() {
if(MobileEsp.DetectTierTablet()) { // if its a tablet this will be true
$("html").addClass("isTablet"); // this will add the isTablet class to the HTML element
}
});
<script>
The example above uses jQuery, which will make things easier for you if you are getting started with JavaScript. With that in place you just need to set up rules for your tablets in your stylesheet like this:
<style>
body {
max-width: 1200px;
}
.isTablet body {
max-width: 100%;
}
</style>
It also has other versions for ASP.NET and PHP so you can do the detection server side.
Here's a fiddle illustrating the functionality outlined above:
Fiddle
I get that you don't want to touch the media query, but as far as I can see it feels like your problem can be solved by
#media (orientation: landscape) { ... }
You want to determine if it's a landscape view..right?
about other usages of media query MDN:media query
if you really don't want to touch it, there is another option is to use javascript. But I think that will be make things more complicated.
Hope my answer helps..:)