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

[CodeMaster2008]

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;

[Ivan Ivanov]

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.

[CodeMaster2008]

That helps, thanks a lot.

[Pierre Chew]

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

[Steve]

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.

[Dev]

What's the status of this? It would seems there are still 'quirks' with media queries within the simulator.

[Tina Stancheva]

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