Как я могу запретить response.js читать мой медиа-запрос на сетчатке? - PullRequest
Новая
       7

Как я могу запретить response.js читать мой медиа-запрос на сетчатке?

3 голосов
/ 25 января 2012

Я добавил response.js для активации медиазапросов в ie7 + 8, но проблема, с которой я сталкиваюсь, заключается в том, что ie7 + 8 теперь, похоже, читает медиазапрос дисплея Retina, который, как вы можете себе представить, портит мой макет. Кто-нибудь еще сталкивался с этой проблемой, и если да, то как это можно предотвратить? 

    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
}

Обновление для всех, у кого возникла такая же проблема:

По сути, я переместил любые hd медиа-запросы в их собственный файл .css (hd.css), а затем добавил условный оператор в раздел моего сайта, который не позволяет IE 8 видеть его.

Ответы [ 5 ]

6 голосов
/ 25 января 2012

Вы можете добавить класс, специфичный для определения IE (если вы этого еще не сделали), в свой HTML-тег с помощью jQuery, очень похоже на Modernizr для возможностей браузера. Затем оберните стили в медиа-запрос: 

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {

   html.no-ie div#mydiv{
      /* STYLES FOR #mydiv HERE */
   }

}

Определите браузер с помощью свойства jQuerys $. Browser и добавьте класс в свой HTML-тег (с версией ... потому что ... почему ...?): 

/* CHECK IF BROWSER IS IE */
if($.browser.msie){
   /* GET THE BROWSER VERSION...BECAUSE WE CAN! */
   var version = $.browser.version;

   /* ADD CLASSES FOR BROWSER + VERSION TO HTML TAG ie. <html class="ie ie6"> */
   $('html').addClass("ie ie" + Math.floor(version));
}

Надеюсь, это полезно.

1 голос
/ 23 мая 2013

Я использую комбинацию ответов Стива О и Кристины Арасмо Беймер:
Чтобы быть немного более точным в отношении возможностей медиазапросов, я включил определение css-mediaqueries в мою пользовательскую сборку Modernizr . Тогда у вас есть mediaqueries класс в вашем HTML-теге, вам не нужно писать свой собственный JS или вручную добавлять класс в ваш HTML.

Теперь вы можете сделать: 

@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
  html.mediaqueries #element {
  }
}

Если вы используете Компас, я могу порекомендовать этот миксин: Retina-Sprite-for-Compass

1 голос
/ 13 сентября 2012

с заголовком документа шаблона, я добавил класс "современный" к последнему условию без условий с условиемперед тэгом html: 

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js es lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js modern" lang="en"> <!--<![endif]-->

, затем в моей сетчатке CSS - если сетчатка CSS находится внутри медиа-запроса с max и min (вот почему response.js читает его), я имею:

.modern #logo a { /*w & h LOGO */
    background-image: url(../images/logo_@2x.png);
        -moz-background-size:200px 81px; /*w & h of original 72dpi image REMEMBER THIS IS THE LARGE LOGO*/
         -ie-background-size:200px 81px;
          -o-background-size:200px 81px;
     -webkit-background-size:200px 81px;
             background-size:200px 81px;    
}
1 голос
/ 27 апреля 2012

Попробуйте удалить ссылки «только экран» из вашего медиазапроса, чтобы он читал: 

@media (-webkit-min-device-pixel-ratio: 2),
(min-device-pixel-ratio: 2){

}
0 голосов
/ 31 января 2013

Мое очень простое решение использует основную проблему ошибки, чтобы исправить себя.Основная проблема заключается в том, что response.js видит свойство -webkit-min-device-pixel-ratio, не знает, что делать, и просто игнорирует его, неправильно показывая блок стиля.Мое решение состоит в том, чтобы скопировать весь блок медиазапроса, вставить его в css сразу после и изменить '-webkit-min-device-pixel-ratio' на '-webkit-useless-fake-property', а затем сделать все правила cssотрицание предыдущего блока.response.js ТАКЖЕ проигнорирует это, передаст его, и он отменит предыдущий блок!

Пример: 

@media all and (-webkit-min-device-pixel-ratio:2) {
    #selector {
        background-image:url("img2x.png"); /* 1000 x 400 */
        background-size:500px 200px;
    }
}
@media all and (-webkit-useless-fake-property:2) {
    #selector {
        background-image:url("img.png"); /* 500 x 200 */
        background-size:auto;
    }
}

Учитывая, что это действительно только для изображений сетчатки, не будет много правил для отмены.Браузер, у которого голова не в камне, а пальцы в ушах, будет использовать собственный CSS3 и просто игнорирует медиазапрос -webkit-useless-fake-property.

...