The default sizes for most HTML elements is in pixels which is a fixed measurement… but as you’ve noted, the screen size on your tablet and your PC are different. As such we generally recommend using dynamic measurements. This is briefly touched on in the Custom Tiles developer documentation:
Prefer dynamic measurements rather than fixed pixel sizes
Users retain the ability to adjust tile dimensions as they see fit, so also plan on accommodating larger or smaller tile sizes where reasonable em, vh, or % sizes provide flexibility in scaling compared to px units and can be used with font sizes, div sizes, etc.
The ‘window’ size will be the size of the tile since the custom HTML is displayed in an iframe. This can be used as a helpful reference if you want to dynamically calculate sizes or use CSS @media queries
A simple approach is to use viewport relative sizes. So looking back at your Fully Kiosk Volume Slider post, it looks like the style was using pixel measurements:
So 50vw is basically saying 50% of the width of the tile (viewport width). And 80vh is saying 80% of the height of the tile (viewport height).
2. HTML Range Styling
Unfortunately, I don’t think there’s an ‘easy’ answer here. Each browser has their own set of rules and default styles applied to a range. You can use CSS to adjust various parts of a range and it tends to be relatively straightforward for a horizontal slider (though a lot of detail), but gets complex with vertical sliders.