![]() Note: there is a bug with window maximization in some Electron versions on Windows (see #6). ( -webkit-device-pixel-ratio : 3), ( device-pixel-ratio : 3) ![]() ( -webkit-device-pixel-ratio : 2), ( device-pixel-ratio : 2) , ![]() We'll use CSS grid to overlap the maximise/restore buttons, and later use JavaScript to alternate between ( -webkit-device-pixel-ratio : 1.5), ( device-pixel-ratio : 1.5) , We'll put the buttons inside the #drag-region div Making use of the srcset attribute of the, we can load the correct resolution icons for the user's display scaling factor/device pixel ratio. To overcome these issues, I recreated the icons as PNGs for crisp viewing at display scaling factors from 100-350% (but only the predefined Windows 10 scaling values for custom scaling values you will probably see some anti-aliasing blur/pixelation and may be better off using the old method or the SVG approach). However, these have some issues, such as high DPI display scaling and lack of cross-platform compatibility. A previous version of this tutorial used the Segoe MDL2 Assets font for the icons. It's time to add the minimise, maximise, restore and close buttons. If you reload now, you will be able to drag the window around again, and the window can be resized at the top. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |