1. #1
    Sencha User
    Join Date
    Feb 2014
    Posts
    102
    Vote Rating
    0
    prateek204 is on a distinguished road

      0  

    Default Unanswered: Media type inside link not working for windows phone ( IE )

    Unanswered: Media type inside link not working for windows phone ( IE )


    I'm trying to add media types in links so that different css files are loaded according to the screen width or height.

    I added the following code in my index.html page

    Code:
    <link type="text/css" rel="stylesheet" href="resources/css/app_phone.css" 
            media="only screen 
                   and (max-width: 480px) 
                   and (-webkit-max-device-pixel-ratio: 1)">
        <!-- Phone ~ Retina -->    
        <link type="text/css" rel="stylesheet" href="resources/css/app_phone_retina.css" 
            media="only screen 
                   and (max-width: 480px) 
                   and (-webkit-min-device-pixel-ratio: 1.1)">
    This works well for chrome or android and IOS devices.
    But when I try to use the same code for windows or on IE, it doesn't work.
    Please help me resolve this.
    Thanks

  2. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,696
    Answers
    311
    Vote Rating
    117
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    What version of IE did you test on?
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  3. #3
    Sencha User
    Join Date
    Feb 2014
    Posts
    102
    Vote Rating
    0
    prateek204 is on a distinguished road

      0  

    Default


    I tested on IE 11 in my pc and also tested on windows phone 8 ( uses IE 10 )

  4. #4
    Sencha User
    Join Date
    Feb 2014
    Posts
    102
    Vote Rating
    0
    prateek204 is on a distinguished road

      0  

    Default


    I got a workaround for this.
    Not sure why this works, but it works for me.

    I just added screeen\10 to my media type.
    Here's my link after adding screen\10

    Code:
    <link type="text/css" rel="stylesheet" href="resources/css/app_phone.css" 
            media="only screen                and (max-width: 480px), screen\10               and (-webkit-max-device-pixel-ratio: 1)">    <!-- Phone ~ Retina -->        <link type="text/css" rel="stylesheet" href="resources/css/app_phone_retina.css"         media="only screen                and (max-width: 480px)                 and (-webkit-min-device-pixel-ratio: 1.1)">

Thread Participants: 1

Tags for this Thread