I need to findout and apply tablet width from css with css expression.
I have a div content. it should apply width 100% in portrait mode and When i turn to landscape the div should change the width to half of the tablet device width(tablet width/2). How to apply this expression method in css?
I'd try to steer clear of expressions, as they are limited to Internet Explorer 5,6 and 7 (what tablets runs this??), and they slow things down considerably (performance wise). Anyway, try this:
#media screen and (orientation:portrait) {
/* Portrait styles */
}
#media screen and (orientation:landscape) {
.element {
width:expression(document.body.clientWidth / 2);
}
}
You can also try more specifics - these would be considered as hacks (thanks to TheBlackBenzKid for suggesting it):
/* Windows 7 Phone - WP7 */
#media only screen and (max-device-width: 480px) and (orientation:portrait) {
}
#media only screen and (max-device-width: 480px) and (orientation:landscape) {
}
/* Apple iPhone */
#media only screen and (max-device-width: 320px) and (orientation:portrait) {
}
#media only screen and (max-device-width: 320px) and (orientation:landscape) {
}
If not using expressions, (e.g. to target other browsers and .. well, tablets) you can use a small javascript to detect the orientation, and then add a class to the element:
html:
<body onorientationchange="updateOrientation();">
Javascript:
function updateOrientation() {
if(window.innerWidth> window.innerHeight){
//we are in landscape mode, add the 'LandscapeClass' class to the element
document.getElementById("element").className += " LandscapeClass";
} else {
//we are in portrait mode, remove the class
document.getElementById("element").className =
document.getElementById("element").className.replace
( /(?:^|\s)LandscapeClass(?!\S)/ , '' );
}
If using jQuery, you could try this, to modify the element's (inline) CSS directly:
function updateOrientation() {
var $width;
if(window.innerWidth> window.innerHeight){
$width = window.innerWidth/2;
} else {
$width = '100%';
}
$(".element").css({width:$width});
}
I have not tested any of this, but I think it will work
Related
I have past experience of working with foundation. So I started using foundation media queries rules for creating responsive site.
// Small screens
#media only screen { } /* Define mobile styles */
#media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
// Medium screens
#media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
#media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
// Large screens
#media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
#media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
// XLarge screens
#media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
#media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
// XXLarge screens
#media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */
Here is my problem:
I am trying to hide a menubar in mobiles that is shown in desktop version (like how show-for-small in foundation). So I have defined stylings for mobile inside the media query #media only screen and (max-width: 40em). Surprisingly it is not working . So I have added the following rule before the above mentioned rule, #media only screen { }, then it worked.
I also tried the combination of #media only screen and (min-width:5 em) and (max-width: 40em). It also did not work.
I also have viewport meta tag defined in my page. Can anyone explain me why this is happening so ???
i think the problem maybe related to css specificity ( one command has higher priority)
so what about trying to put
#media only screen and (max-width: 40em)
in the last of your commands
and also inspect element in browser to know if this command is overwrited by other command
this is the most things happen with me when works with bootstrap ,wish this help you
You have to give your element the hide-for-small class so that it won't show up on mobile screens: Know as visibility classes
#media only screen and (min-width : 1824px) {}
#media only screen and (min-width : 1224px) {}
I am using these mediaqueries and these are working fine but when I see my website at 1280px resolution, it does not work
Try like this:
#media screen and (min-width: 1024px) and and (max-width:1280px)
{
.....
}
#HMS Designz, If you want to access media query 1280 to 1024 resolution. You can try like this.
#media screen and (min-width:1024px) and (max-width:1280px) {}
#media all and (min-width: 1280px) {
/* css for width greater than 1280px */
}
#media all and (max-width: 1280px) and (min-width: 1024px) {
/* css for width between 1280px and 1024px */
}
#media all and (max-width: 1023px) {
/* css for width less than 1024px */
}
Here is detailed explainition of media queries.
include this in <head></head> (if you have not)
<meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->
change you #media style as this // change width as per your requirements
#media only screen (max-width: 500px) {
// or as per your needs, as I try to explain below
}
Now I try to explain maybe..:)
#media (max-width:500px)
for a window with a max-width of 500px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.
#media screen and (max-width:500px)
for a device with a screen and a window with max-width of 500px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other media types the most common other one being print.
#media only screen and (max-width:500px)
Here is a quote straight from W3C to explain this one.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
As there is no such media type as "only", the style sheet should be ignored by older browsers.
If
That's what media queries are: logical if statements. "If" these things are true about the browser, use the CSS inside.
And
The keyword and.
#media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
Or
Comma separate.
#media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}
Technically these are treated like to separate media queries, but that is effectively and or.
Not
Reverse the logic with the keyword not.
#media not all and (max-width: 600px) {
html { background: red; }
}
Just doing not (max-width: 600px) doesn't seem to work for me, hence the slightly funky syntax above. Perhaps someone can explain that to me. Note that not only works for the current media query, so if you comma separate, it only affects the media query it is within. Also note that not reverses the logic for the entire media query as a whole, not individual parts of it. not x and y = not (x and y) ≠ (not x) and y
Exclusive
To ensure that only one media query is in effect at time, make the numbers (or whatever) such that that is possible. It may be easier to mentally manage them this way.
#media (max-width: 400px) {
html { background: red; }
}
#media (min-width: 401px) and (max-width: 800px) {
html { background: green; }
}
#media (min-width: 801px) {
html { background: blue; }
}
Logically this is a bit like a switch statement, only without a simple way to do "if none of these match do this" like default.
Overriding
There is nothing preventing more than one media query from being true at the same time. It may be more efficient to use this in some cases rather than making them all exclusive.
#media (min-width: 400px) {
html { background: red; }
}
#media (min-width: 600px) {
html { background: green; }
}
#media (min-width: 800px) {
html { background: blue; }
}
Media queries add no specificity to the selectors they contain, but source order still matters. The above will work because they are ordered correctly. Swap that order and at browser window widths above 800px the background would be red, perhaps inquisitively.
Mobile First
Your small screen styles are in your regular screen CSS and then as the screen gets larger you override what you need to. So, min-width media queries in general.
html { background: red; }
#media (min-width: 600px) {
html { background: green; }
}
Desktop First
Your large screen styles are in your regular screen CSS and then as the screen gets smaller you override what you need to. So, max-width media queries in general.
html { background: red; }
#media (max-width: 600px) {
html { background: green; }
}
You can be as complex as you want with this.
#media
only screen and (min-width: 100px),
not all and (min-width: 100px),
not print and (min-height: 100px),
(color),
(min-height: 100px) and (max-height: 1000px),
handheld and (orientation: landscape)
{
html { background: red; }
}
Note the only keyword was intended to prevent non-media-query supporting browsers to not load the stylesheet or use the styles. Not sure how useful that ever was / still is.
And for media queries priorites
sources : one two three four five
You are not create any media query for 1280 px resolutions. First create media query for that resolution using following media query.
#media screen and (min-width:1024) and (max-width:1280px)
{
}
I know it's with pure CSS possible to adapt the stylesheet according to screen dimensions, like this:
#media (max-width: 959px) {
/* styles for smallest viewport widths */
}
#media (min-width: 600px) and (max-width: 959px) {
/* styles for mid-tier viewport widths */
}
#media (min-width: 960px) {
/* original CSS styles */
}
(source)
Is it with pure css possible to check on a landscape or portrait display?
Yes, using the following syntax:
#media all and (orientation: landscape) {}
See the w3 specs for more information.
You can use orientation:
#media all and (max-width: 959px) and (orientation : portrait) {
/* Styles */
}
From w3:
#media all and (orientation:portrait) { … }
#media all and (orientation:landscape) { … }
All answers are incorrect. Android will swap from portrait to landscape when the keyboard is shown.
Different keyboards also need testing as they can take up more vertical space. Swift keyboard takes up more vertical space so you cannot use solutions like #media screen and (min-aspect-ratio: 13/9) { /* landscape styles here */} as this will fail on lots of phones.
The only solution is to use javascript.
On newer Android devices you can test and use the new window.screen.orientation api.
On iOS you can use window.orientation which works fine. ie Math.abs( window.orientation ) === 90 is landscape
And as a fallback you can use window.screen.width > window.screen.height which will cover really old Android devices which don't support the new window.screen.orientation api
Then all you need to do is add / remove a class on resize / orientationchange events.
/* Android Orientation */
var orientation = window.screen.orientation || window.screen.mozOrientation || window.screen.msOrientation || null;
/* Check */
if ( orientation && orientation.type ) {
/* Landscape */
if ( orientation.type === 'landscape' || orientation.type === 'landscape-primary' || orientation.type === 'landscape-secondary' ) {
return 'landscape';
/* Portrait */
} else {
return 'portrait';
}
}
I have different views on portrait and landscape
/* portrait ----------- */
#media only screen
and (max-width : 320px) {
body{
padding:20px;
}
}
/* landscape----------- */
#media only screen
and (min-width : 321px) {
body
{
padding:60px;
}
}
/* webpage----------- */
body
{
padding:0px;
}
however, landscape css effects on webpage view. how do I spilt webpage up?
I tried to make another media query on webpage, but it didnt work.
also I tried (min-device-width : 321px) for devices only, but it doesnt work
As explained in this article, the media query spec includes orientation detection. It should look something like this:
#media screen and (orientation:landscape) and (min-width:321px) {
foo {
padding:60px;
}
}
#media screen and (orientation:portrait) and (max-width:320px) {
foo {
padding:20px;
}
}
And so on.
I am trying to build a site with iphone / android / ipad compatibility but do not possess these devices. I tried using the Responsinator, but noticed that it was not even picking up my iphone media queries, such as:
/* iphone */
#media only screen and (max-device-width: 480px) {
#wrapper { background-color: red; }
}
The background for #wrapper was not showing up red on the Responsinator's iphone viewer, but on an actual iphone it is. Are there any good free sites or apps that will pick up css media queries so that I can develop for these devices without having to own all of them?
Thank you
I think the reason they're not picked up in "normal" browsers is that you're using max-device-width. If you use max-width instead they'll work "everywhere" (not IE).
I'd also suggest coding mobile first. Instead of starting with the largest resolution and working backwards, start with the smallest and improve the layout as the resolution grows.
Personally I use this code:
/* Default */
/* Little larger screen */
#media only screen and (min-width: 480px) {
}
/* Pads and larger phones */
#media only screen and (min-width: 600px) {
}
/* Larger pads */
#media only screen and (min-width: 768px) {
}
/* Horizontal pads and laptops */
#media only screen and (min-width: 992px) {
}
/* Really large screens */
#media only screen and (min-width: 1382px) {
}
/* 2X size (iPhone 4 etc) */
#media only screen and
(-webkit-min-device-pixel-ratio: 1.5), only screen and
(-o-min-device-pixel-ratio: 3/2), only screen and
(min-device-pixel-ratio: 1.5) {
}
From: http://stuffandnonsense.co.uk/projects/320andup/