Webdialog px scaling

I’m having issue with IE not scaling the reference px unit when using high DPI settings on Windows (Higher than 100%)

In CSS, I define all sizes in px.
When I open my html file in the desktop version of IE, or any other browser, the content is correctly scaled. But once opened in a webdialog inside Sketchup, the content is not scaled.

When using CTRL+“+” or CTRL+scroll to zoom, the content is correctly scaled.

Using ems instead of px seem to work fine, but I’d rather not use this unit. I’ve always hated it, and never had issue before with px.

Anyone else having this issue? Any solution?

I just found out about rem (never heard about this before).

html { font-size: 62.5%; }
then 1/10 of px values as rem is working great and still easy to use.

Meaning 10px == 1rem using the above font-size in the html css.

What document mode are you using? I know IE have been resilient to scale units defined in px. But I thought the later editions where very much similar to other browsers provided you used a standard docmode. (Remember in embedded web controls you must force this with a META tag.)

Yes - this is some times done. It rely on the browsers default font size. (Which could be adjusted by the user - FYI)

[quote=“tt_su, post:3, topic:11878”]
What document mode are you using?[/quote]

Yea, that’s a good boiler plate. (though that last meta is redundant I think)

Using rems is still not perfect. It doesn’t play well with svg images. And their are weird issues with borders/margins and floating elements.

If anyone has a solution for using px, I’m still interested!

My desktop and notebook are set to different DPI settings, and both are 1920. Sooooo, a long time ago I built in a choice of three font size settings for all of my WD’s (across the plug-in, not individually.) I subclass the WD class and built the font sizing, debugging, etc into it.

As to the HTML/CSS, I declare the body as a pixel font size, and everything else uses EM’s for sizing. Change the body font size in code, and everything resizes.

This has worked for me, and I’ve got most of the html elements in one or more of my WD’s…


1 Like