Client has the following display settings on Windows Surface. He is seeing a website quite differently that to what I am seeing. What CSS media query can I use to be able to make adjustments to allow for these specific settings
I would start with:
#media only screen and (min-width: 2736px) and (min-height: 1824px) and (orientation: landscape) {
...
}
You can also detect it via JS.
Read this: How to check if device is Windows Surface Tablet and browser is chrome or IE
And if it's a Surface, add some CSS class dynamically to the appropiate elements.
Related
Is there a simple way to target landscape mobile devices without affecting desktop ones, without entering the screen size for every device?
If not, is there a single best resolution to target most of the users?
Nowadays mobile screens can have a resolution equal or grater than most desktop screens, I can't see why many use rules for resolutions below 640x480.
For example, to target portrait devices (99% are mobile), one could write his rules in
/*Global and desktop rules*/
#media only screen and (orientation: portrait) {
/*Mobile overwrites*/
}
However, the same query for orientation: landscape would affect desktop users as well.
My temporary workaround is to use vw, vh and vmin, but I would like to know if there's a better way.
Would a mobile CSS media simplify web developers' job?
You can mix CSS Media Queries for orientation to detect landscape mode and hover + pointer to detect a touch device.
#media (orientation: landscape) and (hover: none) and (pointer: coarse) {
/* your CSS to target only landscape mobile users */
}
For a reference to detect a touch device with only CSS here's a good article on medium.
The best solution is to use JavaScript to detect the device and add a class to the <body> or the <html> in order to add your CSS.
You can have a look at current-device, you just include the script, that then updates the <html> section with the appropriate classes based on the device's characteristics.
Hope this helps.
There is a query #media pointer, which determines whether the the user has a pointing device (like a mouse). Since mobile devices don't have a pointer, you could combine not: pointer and orientation: landscape, like this
#media (not: pointer) and (orientation: landscape) { ... }
Try this:
#media (orientation: landscape) {
}
My media query works on Android in all browsers but not on IPhone. I have IPhone 6s Plus and when I opened my website, it crashed the page. On other IPhones it's just css in mess. What's the problem?
#media only screen and (max-width:768px) and (orientation : portrait) {}
Just use :
#media (max-width:768px) {
}
In my opinion, the other parameters are irrelevant, they just lead you to messy stylesheets.
But keep in mind that a better approach may be to set breakpoints based on content and layout.
I advise you to read this SO Post
I have this css code that shows a div on retina displays.
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape){#warning-message,#wrapper{display:block;}}
The problem is that I don't want it to be shown on Mac but just on iPhones and iPads. How can I be more target specific?
Access the your developer tools in the browser(I use Chrome for this, press F12) and determine the screen sizes you'd like to modify(Chrome has them in the top left). For example, if you look up a macbook with an 11 in. screen it's only 1366 x 768, but your largest ipad will be 768 x 1024. You can make specific media constraints per device by using "and" with your CSS tags. Otherwise, take a look at this link for more specific detail on the CSS media queries, you may have a "not '...' and is Retina" option.
#media not all and (monochrome) { ... }
#media (min-width: 700px) and (orientation: landscape) { ... }
Good Luck on your project!
I'm working on an asp.net site and making it responsive, just using #media commands in the stylesheet.
Usually when I work on apache websites, e.g. wordpress as soon as I refresh the page, I can resize the brower to a mobile or tablet size and see the changes on a PC browser. But with this .net site the changes don't show.
They do show however on my actual mobile phone, but I don't want to have to keep previewing changes through my phone.
I've tried using an emulator like mobiletest.me but that doesn't display the changes either. I've tried using Firefox and Chrome, neither work. It seems the website isn't being fooled into thinking my browser is a mobile.
Anyone have an an idea on what this issue could be?
Thanks
UPDATE
Sorry code below:
#media only screen and (max-device-width: 480px) {
#block1 {
display:none;
}
An educated guess says that you are using a specific media query for devices, rather than resolution alone, which is why it's not responding when you resize the window.
Mobile devices: (what i suspect you have)
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
Based on Resolution: (what you require)
#media only screen
and (min-width : 320px) {
/* Styles */
}
For my CSS media queries I've set it up mobile first which deals with all the overall styling.
I then have:
#media only screen and (min-width : 790px) {
}
#media only screen and (min-width : 990px) {
}
and I've added in
#media screen and (orientation: landscape) and (max-width: 520px) {
}
which deals with the CSS changes when the smart phone is turned round to landscape mode, but it doesn't seem to work, am I writing the landscape media query wrong?
Had a similar issue: my iPod/iPhone devices were detected as portrait orientation even when rotated.
I managed to resolve that with the following media query:
#media screen and (min-aspect-ratio: 4/3)
{*your styles here*}
If you want to target any case when width is greater than height, I think something like (min-aspect-ratio: 101/100) or something like this might work. However, for current devices 4/3 is sufficient, I think.
If you need aspect ratio for landscape, I think min-aspect-ratio: 1 suffices ... and therefore max-aspect-ratio: 1 for portrait.
But, even when the CSS is correct, there's an additional step required for a Cordova / PhoneGap app: Why doesn't my Cordova/PhoneGap iOS app rotate when the device rotates?
I found this StackOverflow item before that one, so perhaps others will also find a cross-link useful.