html5 articles won't fit to screen in DPS

Avatar

graphics02p6445

29-10-2015

Not sure how to look into this. I have a couple html5 articles that get into the app, but once viewing them they are either way too small or positioned like -200px to the left edge of the ipad. These all work in every browser and in other apps that deliver html5 apps to mobile devices. I can't seem to find anything on this issue with DPS.

Accepted Solutions (0)

Answers (8)

Answers (8)

Avatar

Colin_Fleming

03-11-2015

Your process seems sound.

Do all of your articles built this way have the same problem? If yes, I'd examine the scripting.

For some reason, I'm slightly suspicious of a script that centers things. Is your offset content still "centered" in its DIV -- but the DIV is shifted?

I have no idea if I'm close to being right here, buy hopefully this helps.

Colin

Avatar

graphics02p6445

03-11-2015

Also I use Javascript to resize a div containing all of the content and place it centered (vertically and horizontally) on the screen. I think it might be a an issue with detecting the window or document width and height dimensions.

Avatar

graphics02p6445

03-11-2015

I just dragged and dropped the folder holding the HTML and JS files into the HTML article packager and then uploaded that into publish.adobe.com as an article. Did not use DPS 2014.

Avatar

rperez_bonnier

03-11-2015

I used Dreamweaver CC to set up a responsive html page using the provided templates.

Then I built the article by hand.

Then I used Chrome and Safari to create/edit new classes within each media query until the article looked good on two phone sizes and one tablet size.

I then duplicated the entire folder and set up a second article. It was a similar yet different enough article that I had to make some tweaks to some of the classes. Each was zipped independently with their own CSS, images, and fonts.

Avatar

rperez_bonnier

03-11-2015

Not exactly the same issue, but I've seen responsinve HTML articles look significantly different than in the desktop browsers (Chrome and Safari) that I used to edit the CSS and test multiple devices. Mostly size issues. I think I remember other folks having similar differences between what they see when prepping the HTML and what they see in the app. A quick search in the forums should list the threads where it was discussed.