Max height with scalable HTML?

[L_A_G]

Hi,

In the past, we have always published (and created) in 800x600 because it was the best for the screen in our computer labs. We had some request to see them on smaller devices. That's fine, we thought, just have to use "scalable html"... But now, when we publish, the projects aren't 800x600, they are really too big and really blurry on our normal screens. Is there a way to avoid that problem? Like having a max height, but no min height?

Thanks,

Laurie-Anne

[Sreekanth_S]

What is the captivate verison you are using?

When you create and publish the course with 800 x 600, that is the maximum dimension it takes.

What kind of content is lookng blurry? Can you check the zoom settings on the browser? Reset it to 100% and test it once. Perhaps a screenshot would help.

Sreekanth

[L_A_G]

Hi!

- I'm using Captivate 6

- Everything looks blurry (Images, text, playbar, etc.)

- My browser is at 100%. But, since the project always takes 100% of the page, nothing changes when I set it to 90%, 110% or 100%.

[TLCMediaDesign]

Look in the published captivate.css file.

Change this:

#CaptivateContent {

text-align:center;

}

To This:

#CaptivateContent {

text-align:center;

max-height:600px

}

[Sreekanth_S]

Just wondering if we specify only the max height and not max width, won't the objects get pixelated due to disproportionate resizing?

Sreekanth

[TLCMediaDesign]

The aspect ratio stays the same, so the width isn't necessary.

[L_A_G]

There is no captivate.css file when you publish in html5. There is  3 .css files:

I found "CaptivateContent" in none of them....

[TLCMediaDesign]

In CP6, HTML5, the only difference between a scalable file and one that is not is in the Project.js file, a section like this, with the bolded part set to false for nonscalable.:

project: {

        fps: 30,

        hasTOC: 0,

        w: 640,

        h: 480,

        prjBgColor: '#ffffff',

        pkt: 0,

        htmlBgColor: '#f5f4f1',

        shc: true

Not sure how all of this fits together, with all of the other css used.

You might try set it to a max display instead of scalable and then use the META tags for mobile display:

<meta name="viewport" content="width=device-width">

<meta name='viewport' content='initial-scale = 1, minimum-scale = 1, maximum-scale = 1'/>

[L_A_G]

I can't do that because the scalable mode was also used on different screen, not just on mobile (ex: 10' pc) or to be embedded in a smaller frame on collaborator website....

Thats dull. It looks less professionnal to have a blurry display. Too bad

Thanks

[xswqazi09]

Hi all,

I'm having the same problem, really don't want the screen to upscale as this makes everything blurry but need it to downscale to smaller sizes. I'm using Captivate 8, has anyone managed to solve this problem?

Thanks for your help!

[TLCMediaDesign]

In the head <script> section of the index.html, place a detections script:

var isMobile;

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )

{

  isMobile = true;

}

else

{

  isMobile = false;

}

Then in the CPM.js find:

cp.shouldScale = cp.D.project.shc;

and replace with:

if(isMobile)

{

   cp.shouldScale = cp.D.project.shc;

}

  else

{

   cp.shouldScale = false;

}

This code stops the project from scaling up if not in a mobile device for HTML5 output.