media-queries

Media Query for Android Devices

由 蓝咒 提交于 2019-12-11 08:58:04
问题 I have my site optimized for OS and iOS, but testing it for Android through browserstack.com has left me puzzled about targeting Android devices in my media queries. Here is my query that works for iOS devices: #using em based query after reading this article: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ @media only screen and (device-width: 20em) I have tried a variety of different queries (including px based queries), but just want one that will work for all /

CSS Media Query don't working in css file

由 人盡茶涼 提交于 2019-12-11 08:57:45
问题 Added this line in index.html: <link href="css/style.css" media="all "rel="stylesheet" type="text/css" /> And this is my Media Query CSS: /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { #mapArea .white span { width: 100px; } } But when i check it in browser, don't working. What's my problem? How can i fix it? (Tested all modern browsers) 回答1: @media only screen has different definition with @media screen

Is Chrome rounding media query em units wrong?

由 二次信任 提交于 2019-12-11 08:08:07
问题 I have set up media query break points as follows: @media screen and (max-width:48em){ /* phone */ } @media screen and (min-width:48.063em){ /* tablet*/ } I got the 48.063em value from some PX to EM calculator (I was told to use em-units for some reason, but that is outside of this question), and it is working ok in firefox, but in chrome, it seems that browser width of 769px falls BETWEEN those max-width / min-width values, and neither is applied to the page. I know this can be fixed by

Media query div not changing width but everything else works

由 此生再无相见时 提交于 2019-12-11 07:58:55
问题 I am trying to adjust the width of a div when the browser decreases in size using max-width. The div does everything but change width. I have looked at it through the developer tools on the chrome browser and the width is slashed out. What's wrong? HTML <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <link rel=

Possible causes for mobile browser to render differently than a scaled-down PC browser?

由 ♀尐吖头ヾ 提交于 2019-12-11 07:44:23
问题 GOAL: Stylize a chat-interface on mobile devices. PROBLEM: I've thrown together a proof-of-concept for a chatbot. Everything is very simple, including the JS & CSS. While I'm also having a separate issue with JS (i think), this here is my CSS problem. While developing, I tested in FF & Chrome, and scaled down the browsers to emulate the mobile-browser experience. All the CSS media queries acted as expected. Yet ...on any mobile device we test, the sizing specified in CSS media queries has no

Increase font size for mobiles in Foundation 6

由 五迷三道 提交于 2019-12-11 07:37:15
问题 I'm unable to make the following SCSS increase the font-size on mobiles and tablets : // Mobile @include breakpoint(medium down) { $global-font-size: 200%; } The generated CSS files isn't even changed after adding the code above. 回答1: Unfortunately it's not possible to define a SASS variable inside a media query. See this Closed issue for a more detailed description (has Foundation as an example). You can do a similar kind of thing like this though: %screen-font { font-size: 100%; @media #{

Change HTML on mobile/tablet device

由 十年热恋 提交于 2019-12-11 07:22:06
问题 I have button 1 and button 2. I have to show button 1 if I am in a computer screen, instead, I have to show button 2 if I'm in mobile/tablet devices. So, I want that something that can change the visible html in my page. There is something like mediaquery for html? Thank you in advance! 回答1: Yes, media-queries could be used to get the result you want. But you use them in your css-style sheets. Something like this: @media only screen and (max-width : 480px) { .btn-mobile-visible { visibility:

Bootstrap layout media queries not working at 767px on Chrome

由 余生颓废 提交于 2019-12-11 06:39:06
问题 I have a Chrome-only problem with my Bootstrap (v3.3.5) layout css at exactly 767px where the layout styles simply aren't being applied. Here's the behaviour after experimenting with the console on 3 browsers... Chrome -window.innerWidth of <= 766 - correctly shows mobile layout -window.innerWidth of == 767 - incorrectly applies no layout styles -window.innerWidth of >= 768 - correctly shows full screen layout Firefox -window.innerWidth of <=766 and ==767 - correctly shows mobile layout

Media Queries not responding on to Orientation Changes on iPhone 5

由 倖福魔咒の 提交于 2019-12-11 06:06:15
问题 For some reason, the iPhone 5 doesn't change the layout of my site when it is rotated from portrait to landscape or visa-versa. So, if the page is loaded in portrait view, the portrait media queries I have defined kick at and adjust the site, but then if it is rotated, the layout stays optimized for portrait view. If I manually refresh the page though, the landscape view loads, but won't change to portrait if the phone is rotated, unless it is refreshed again. Here is the basic code from my

Media queries not work in firefox

由 喜夏-厌秋 提交于 2019-12-11 06:05:26
问题 I have added following media query for my php project to hide an image when screen width is 1254px. @media screen and (max-width: 1255px ) { .visible-desktop { display: none; } } It works on Chrome correctly but it's not working on Firefox. Can anyone help me to solve this problem? 回答1: Your media query is right and working perfectly in chrome and in firefox. As you can see on this JSFiddle... I guess (since we dont have any more code) .visible-desktop 's display is being setted on some other
订阅 media-queries