Try our conversational search powered by Generative AI!
AI OnAI Off
How the display channels work for different devices?
I'm not sure I understand your question. Does the previews have the wrong dimensions when comparing to an actual mobile device? That's not so weird since the preview is not supposed to be that exact, and your website should be responsive a handle this.
Display channels doesn't detect your device's resolution either. Display channels are only a way for editors to get a grasp on how the website might look on a smaller device.
Or are you trying to access edit mode with a mobile and then trying to preview the page in a display channel?
Nov 25, 2015 1:07
Hi Johan,
I have tried to personalize my content depends on the resolution.I have three channels for three resolution.i have set an image for each channel.in preview it works.but while test in a device two channels are in active state.I have to mention it that i set the resolution of the actual devices. Can we detect the resolution using display channels?
Nov 26, 2015 11:22
As far as I know, there is no good way to actually get the device's resolution from the backend. The recommended way is to use media queries in CSS instead.
There is no built-in way to map a display channel resolution with the device's resolution.
It's up to you to set the active display channel, so something is wrong with your logic in the code. Can you post some code?
Nov 30, 2015 10:28
Thanks for ur consult...Yes I get a little bit idea about display channel.It just check whether is mobile or not.and the corresponding channel gets mapped to the resolution class in my code...
channel:
public class MicromaxCanvasSpark: DisplayChannel
{
public const string Tag = "Micromax"; //Channel name for user convenient
public override string ChannelName
{
get
{
return Tag;
}
}
public override string ResolutionId // This is used to configure a resolution
{ // from the resolution mentioned class
get
{
return typeof(MicromaxCanvas).FullName;
}
}
public override bool IsActive(HttpContextBase context) //Check whether it is a
//mobile or not
{
return context.Request.Browser.IsMobileDevice;
}
}
Resolution mapped class to the above channel:
namespace EpicFirst.Business.Channels
{
/// <summary>
/// Defines resolution for desktop displays
/// </summary>
public class StandardResolution : DisplayResolutionBase
{ //By default this resolution
public StandardResolution() //is bind with Automatic
//resolution in CMS
: base("Standard 1366*768", 1366, 768)
{
}
}
/// <summary>
/// Defines resolution for MicromaxCanvas
/// </summary>
public class MicromaxCanvas : DisplayResolutionBase //This class is need to be
//binded in the above channel
{
public MicromaxCanvas()
: base("Micromax 280*360", 280, 360)
{
}
}
}
Configuring our channel to CMS by this base class
namespace EpicFirst.Business.Channels
{
/// <summary>
/// Base class for all resolution definitions
/// </summary>
public abstract class DisplayResolutionBase : IDisplayResolution
{
private static readonly LocalizationService _localizationService = ServiceLocator.Current.GetInstance<LocalizationService>();
private string _nameOrResourceKey;
/// <summary>
/// Initializes a new instance of the <see cref="DisplayResolutionBase"/> class.
/// </summary>
/// <param name="name">The name.</param>
/// <param name="width">The width in pixels.</param>
/// <param name="height">The height in pixels.</param>
protected DisplayResolutionBase(string name, int width, int height)
{
Id = this.GetType().FullName;
_nameOrResourceKey = name;
Width = width;
Height = height;
}
public DisplayResolutionBase() { }
/// <summary>
/// Gets the unique id for this resolution
/// </summary>
public string Id { get; protected set; }
/// <summary>
/// Gets the name of resolution.
/// </summary>
public string Name
{
get
{
return Translate(_nameOrResourceKey);
}
}
/// <summary>
/// Gets the resolution width in pixels.
/// </summary>
public int Width { get; protected set; }
/// <summary>
/// Gets the resolution height in pixels.
/// </summary>
public int Height { get; protected set; }
private static string Translate(string resurceKey)
{
string value;
if (!_localizationService.TryGetString(resurceKey, out value))
{
value = resurceKey;
}
return value;
}
}
}
Nov 30, 2015 16:31
All my doubt is worked in preview but in live device it produce two channels....for ur note i have mentioned the same resolution of the device in my code too
Edited,
Nov 30, 2015 16:34
Ok, so fairly common implementation.
The display resolutions are there only for previewing how it would look like in different resolutions in the active channel. It's for the active channel(s) you can have different views. So you don't personalize the content for different resoultions, but rather the active display channel(s).
A display channel on the other hand could be active depending on the device's resolution, but I wouldn't recommend that approach since there are no good solutions to get the resolution from code. A more common approach is to have different channels for different type of devices or content types e.g. PDF or RSS/XML/JSON.
Making the website responsive with media queries is a more appropriate solution.
Nov 30, 2015 16:45
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
I have created the display channels and set the custom resolution for that display channels.Its working perfectly in the preview dropdown.But i have tested it in different devices its working different ways.I am clear that it detect the device resolution and compare it to the display channel resolution.Still i have the doubt in the comparision is greater than the channel resolution or less than or exact?