Зачем вы это делаете через JS?
Делайте через CSS и через инспектор кода проверяйте специфичность.
Ну и кроме zoom есть transform, width, height, font-size.
Т.е на 2 мониторах 15дюймов, с разрешением 1366х768 и 1920х1080 сайт будет выглядеть идентично, т.к размеры css пикселей там равны.
С чего бы это?
Задайте максимальную ширину основного контейнера, например, 1200px и центрируйте его.
Затем в настройках меняйте разрешение экрана и открывайте сайт на 1920 и 1366 и увидите разницу хотя бы в ширине полей.
А чему равен размер css пикселя, например на 30 дюймах?
Зависит от разрешения экрана, масштаба в системе и в браузере.
но border: solid black 4px работает не правильно с ним.
mr jeery, Потому что в этом случае не border, а тоже градиенты.
Другой способ это наложение псевдоэлемента, либо повернутого, либо с этим самым градиентом в фоне.
9StarRu, Ради того, чтобы задать ширину блоков в 33% (30%) или 50% тянуть целый паровоз не имеет смысла.
Можно задать display: flex родителю и flex-shrink, -grow и -basis дочерним.
С svg проще