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/
Related
I'm using scss and I just want to disable hover features on mobile for a very specific section of code. It's a nested div using the & prefix. So, basically:
.superclass{
.subclass{
#media not all and (pointer: coarse) {
&hover{
hover style
}
}
}}
Would this work? Right now I'm dealing with build issues keeping me from deploying my application locally and verifying that way.
Why don't you use a traditional size approach for mobile?
#media only screen and (max-width : 320px) {
/* Styles */
}
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..:)
I have a VERY simply html form (an image with some text & select fields) which I would like to change to be available also for mobile devices.
What's the SIMPLEST solution for accomplishing this task ?
I found many explanations on the web, but they are all much too complex for my needs... Basically I just want to have the width of the form adjustable according to device, nothing more :)
Any reference to a SIMPLE tutorial that explains how to do the most basic adjustments for mobile ?
You could use CSS3 Media Queries to build a Responsive Layout.
For instance:
#media (max-width: 767px) {
.yourFormClass {
/* Some rules */
}
}
#media (min-width: 768px) and (max-width: 979px) {
.yourFormClass {
/* Some rules */
}
}
/* other resolutions... */
I suggest you to read these articles:
How To Use CSS3 Media Queries To Create a Mobile Version of Your
Website;
CSS media queries by Mozilla Dev.
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
}
I would like to use a conditional statement to attach a different stylesheet for:
if the clients resolution is <= 1024*768
I'm pretty sure this is possible, but have never seen the code for it before?
ps. I am not looking for a javascript solution
Typically people don't "attach another stylesheet" for screen resolution because you could resize the browser after page load, changing the resolution, and you don't want file loading every time you do.
This will do the trick, in one CSS file:
Ex:
/* css as usual */
.this-class { font-size: 12px; }
/* condition for screen size minimum of 500px */
#media (min-width:500px) {
/* your conditional / responsive CSS inside this condition */
.this-class { font-size: 20px; }
}
This should change the font size to 20px when the #media query condition is true, in this case when the screen is over 500px.
As you size your browser up and down you will see the conditional CSS rules take effect automatically, no JS needed.
CSS 3 introduces media queries, but it is new and support is not all that widespread yet (Firefox only introduced it in version 3.5, for instance, and Internet Explorer won't get it until version 9) so build with progressive enhancement in mind. CSS Tricks has a tutorial for providing different CSS for different browser window sizes (which is a more useful metric then display resolution).
You can test support for your browser.
There's this option, totally client side and javascript driven, add a script tag:
<script type="text/javascript">
if (screen.height < 900) {
document.write('<link href="UrLowRes.css" type="text/css" rel="stylesheet"/>');
} else {
document.write('<link href="UrlHighRes.css" type="text/css" rel="stylesheet"/>');
}
</script>
You could even add other if statements for smartphones and tablets.