Best practices to display images and resize according to device and orientation

Thread is closed for posting
7 posts, 0 answers
  1. CodeMaster2008
    CodeMaster2008 avatar
    5 posts
    Member since:
    Oct 2005

    Posted 19 Jan 2013 Link to this post

    Hi there;

    I just started with Icenium and mobile development and 3 days after I download Icenium  Graphite I was able to put together a small application. Congrats for the excellent product!

    As for the question, basically the title of this post says it all.

    I'm building an application that will be used on tablets and phones.
    I will be adding a image header,similar to this demo:

    http://demos.kendoui.com/mobile/scroller/index.html

    In the demo they are using an image which is 900 x 675 and adjusting it to fit the available width.

    Is it the best practice for those situations or should I have different images and use some javascript code to get the right image for the right device/orientation?

    Thanks in advance;
  2.
  3. Ivan Ivanov
    Admin
    Ivan Ivanov avatar
    41 posts

    Posted 21 Jan 2013 Link to this post

    Hi, Emerson

    You could use media queries for that. With media queries you can set a different styles depending on device screen size and DPI.

    Here is an example:
    <!-- Phone 720x1280 High DPI (aka Google Nexus) -->
    <link rel="stylesheet" media="only screen and (min-device-width: 720px) and (max-device-width: 1280px) and (-webkit-device-pixel-ratio:2)" href="styles/phone-1280.css" type="text/css" />
     
    <!-- Tablet 500x1024 Low DPI (aka Kindle Fire) -->
    <link rel="stylesheet" media="only screen and (min-device-width: 600px) and (max-device-width: 1024px) and (-webkit-device-pixel-ratio:1)" href="styles/tablet-600-1024.css" type="text/css" />
     
    <!-- Tablet 768x1024 High DPI (aka iPad3") -->
    <link rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-device-pixel-ratio:2)" href="styles/tablet-1024-hdpi.css" type="text/css" />

    You could checkout our demo where we use media queries set HD images for devices with retina displays and other high DPI displays.

    More information on media queries: here 

    I hope this information helps you.
    Good luck and if you have any further questions please do not hesitate to contact us.

    Greetings,
    Ivan Ivanov
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  5. CodeMaster2008
    CodeMaster2008 avatar
    5 posts
    Member since:
    Oct 2005

    Posted 21 Jan 2013 Link to this post

    That helps, thanks a lot.
  7. Pierre Chew
    Pierre Chew avatar
    22 posts
    Member since:
    Aug 2012

    Posted 15 May 2013 Link to this post

    Hello,

    I am trying to get these rules to work in the simulator.  They appear to be applied correctly on the phone but not the simulator.  Is that possible?  Specifically the "max-device-width" style sheet rules seem to be getting ignored (the orientation ones seem to work fine).

    Thanks,

    Pierre
  8.
  9. Steve
    Admin
    Steve avatar
    10940 posts

    Posted 16 May 2013 Link to this post

    Hi Pierre,

    Thanks for bringing this to our attention, indeed media queries have some quirks in the simulator and we would look into improving their support. For the time being as you have found out, you can test on real device or adopt other techniques for conditional content rendering e.g. adaptive css via javascript.

    All the best,
    Steve
    the Telerik team

    Don't miss the Icenium May Release Keynote - sign up now!
    Share feedback and vote for features on our Feedback Portal.
  11. Dev
    Dev avatar
    6 posts
    Member since:
    May 2014

    Posted 08 Jul 2015 in reply to Steve Link to this post

    What's the status of this? It would seems there are still 'quirks' with media queries within the simulator.
  13. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3299 posts

    Posted 13 Jul 2015 Link to this post

    Hello,

    The Device Simulators in AppBuilder still don't support media queries. We have looked into different options to provide the CSS parser with simulated device sizes but we haven't yet found a reliable approach to accomplish this task. However, we have a story still logged in our internal issue tracking system and if we find a suitable implementation, we will definitely implement it.

    In the meantime, you can test media queries directly on the devices, as previously mentioned, or in the device native emulators, which are now supported in all AppBuilder clients.

    Regards,
    Tina Stancheva
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  14.
Back to Top