Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Html-article looks different in Safari than in the DPS-app

Avatar

Level 3

I have testet an article with responsive html. It scales on my desktop, on Safari for iPhone and on safari for iPad.

In the dps-app, it behaves totally different!

Should not the app treat html-articles the same way as Safari does?

This is how the article looks on Safari (iPad), the way it is intended to look:

IMG_0135.jpg

But in the DPS-app, it looks like this:

IMG_0134.jpg

I'm really no expert, but to me it looks like Safari scales the content so it looks identically on iapd1/2 and on iPad with retina. Why does not the DPS-app do the same?

And here is same article on iPhone (Safari):

IMG_1092.jpg

On the same iPhone, but in the DPS-app:

IMG_1093.jpg

If anyone wants to test fro themselves,her is the url:

DrMobile integration example

Hope someone has a clue :-)

Espen Moe

DN

3 Replies

Avatar

Level 5

I used Chrome to test our responsive HTML tests articles. I also used Dreamweaver to pre preview the HTML as I wrote the CSS to complement the bootstrap template.

When I loaded them in the DPS app, they looked 90 to 95% the same as in Chrome.

But yes, there were noticeable differences in image scaling both on the iPad and the iPhone.

Is there a better way to test how the HTML will actually display when loaded in the DPS app? Perhaps an update to Preview CC?

It would be best if we don't have to go back in the code once an article is closed.

Avatar

Employee Advisor

How are you packaging up your HTML articles? Are you using the DPS HTML article packager tool?

Does your CSS contain media queries? If so, it could be something related to that...

We've had many examples of HTML that scales properly in DPS, but it's hard to know what the issue is with your particular HTML.

Avatar

Level 3

We use the DPS HTML article packager tool, but I have no idea about media queries. We did not create the html.


The html is here:

http://d2-lp-demo.herokuapp.com/responsive.php

and this is the  article file:

https://www.dropbox.com/s/axpcv0u29iymucc/responsive.article?dl=0