В CSS px - это абсолютная длина единица .Они в основном полезны, когда известна среда вывода.
Для устройства CSS эти размеры либо привязываются (i), связывая физические единицы [дюймы, см, мм, pt,pc] к их физическим измерениям, или (ii), связав единицу пикселя [px] с опорным пикселем .[дополнения и выделение мной]
Если опорный пиксель составляет половину физического пикселя дисплея устройства, значение CSS в 700px будет переводиться на дисплей в 350px- или эти 50% в вашем вопросе.
Итак, то, что вы видите здесь, совершенно правильно, CSS верен в том смысле, что вы выбираете px единицы, вы просто упустили, что px в CSS этоне такой, как пиксель на дисплее.Поскольку это не так, но вы хотите, чтобы это было, похоже, что вы выбрали не ту единицу.
Опять же: абсолютная длина единицы в основном полезны, когда известна среда вывода.
Может быть, вы найдете способ указать браузеру изменить опорный пиксель ?Это решит вашу проблему.Или теперь, когда вы знаете, что происходит, определите устройство и измените длины соответствующим образом.
В качестве альтернативы вы можете заменить свои абсолютные длины относительными (например, например).Поскольку они являются относительными, вам нужно только изменить длину элемента, к которому они относятся, чтобы изменить всю страницу.
Обычно это делается с использованием абсолютной длины в <html> и / или <body> элемент и относительная длина для всего остального.
Этот подход также может помочь вам решить проблему.