Code Monkey home page Code Monkey logo

Comments (5)

ajimenezdev avatar ajimenezdev commented on August 16, 2024

I continue testing and it fails too with on safari browser for ios7 and chrome browser on Android device (Nexus 4 with android 4.3).

And not only fails my web application, if I try to access to http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/font-awesome/ font awesome works perfectly but icon on back button is not display correctly

from jquery-mobile-icon-pack.

ironicent avatar ironicent commented on August 16, 2024

I am seeing this too. Would someone be able to confirm and look at that?

from jquery-mobile-icon-pack.

BenjaminKlatt avatar BenjaminKlatt commented on August 16, 2024

With iOS7, Apple started to use a pixel ratio of 2. This change includes an issue of how background sizes are processed in context with css media queries. There is a good explanation about this at http://stackoverflow.com/questions/18950334/ios7-ignoring-retina-css-media-queries-background-size

The jQuery Mobile Icon Pack makes use of sprites and background image sizes in combination with media queries. This requires to fix this ratio-background-issue in the css.

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx){

    .ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
    .ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
    .ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
    .ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info2, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after,
    .ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on, .ui-icon-email , .ui-icon-page,
    .ui-icon-question , .ui-icon-foursquare, .ui-icon-dollar , .ui-icon-euro,
    .ui-icon-pound , .ui-icon-apple , .ui-icon-chat , .ui-icon-trash , .ui-icon-mappin , .ui-icon-direction,
    .ui-icon-heart , .ui-icon-wrench , .ui-icon-play , .ui-icon-pause , .ui-icon-stop , .ui-icon-person , .ui-icon-music,
    .ui-icon-wifi , .ui-icon-phone , .ui-icon-power ,
    .ui-icon-lightning , .ui-icon-drink , .ui-icon-android {
        -moz-background-size: 774px 54px;
        -o-background-size: 774px 54px;
        -webkit-background-size: 774px 54px;
        background-size: 774px 54px;
    }
    .ui-icon:before { margin-left: 4px; }
}

I also summarized this at http://www.bar54.de/blog/2013/12/jquery-mobile-icon-pack-and-ios-7-retina-devices/

I hope this helps and I would be happy to see this fix build into the next release of the icon pack.

br
benjamin

from jquery-mobile-icon-pack.

commadelimited avatar commadelimited commented on August 16, 2024

Actually the newest version of jQuery Mobile (1.4) uses SVG icons. I've decided to drop the original icon pack icons and simply go with the font awesome icons instead.

from jquery-mobile-icon-pack.

commadelimited avatar commadelimited commented on August 16, 2024

Check out #61 to test.

from jquery-mobile-icon-pack.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.