Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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%.
Copy link to clipboard
Copied
Look in the published captivate.css file.
Change this:
#CaptivateContent {
text-align:center;
}
To This:
#CaptivateContent {
text-align:center;
max-height:600px
}
Copy link to clipboard
Copied
Just wondering if we specify only the max height and not max width, won't the objects get pixelated due to disproportionate resizing?
Sreekanth
Copy link to clipboard
Copied
The aspect ratio stays the same, so the width isn't necessary.
Copy link to clipboard
Copied
There is no captivate.css file when you publish in html5. There is 3 .css files:
I found "CaptivateContent" in none of them....
Copy link to clipboard
Copied
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'/>
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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!
Copy link to clipboard
Copied
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.