华为CUN-L01设备720px矩形仅半显，viewport最佳设置咨询

首先得帮你理清问题根源：你的华为CUN-L01屏幕物理分辨率是720×1280，但它的设备像素比（DPR）是2——简单说就是1个CSS像素对应2个物理像素。当你设置viewport为width=device-width时，这里的device-width指的是CSS像素宽度，也就是360px（720/2）。所以你设置的720px宽的矩形，在移动端相当于两倍视口宽度，自然只能显示一半。

而你不想修改initial-scale=1的顾虑完全正确，改这个会导致桌面端页面缩放异常，破坏原有布局。下面是针对这个场景的最佳解决方案：

方案：用CSS的width + max-width做响应式适配 #

给你的矩形元素添加以下CSS样式：

.rectangle {
  width: 720px; /* 桌面端保持原宽度 */
  max-width: 100%; /* 移动端自动缩放到视口宽度 */
}

为什么这个方案有效？ #

• 桌面端：width:720px会生效，保持你想要的固定宽度，不会出现缩放问题。
• 华为CUN-L01移动端：max-width:100%会让元素宽度自动适配360px的CSS视口宽度，而360px CSS像素 × 2（DPR）刚好等于720物理像素，完美匹配设备屏幕宽度，元素就能完整显示，而且显示清晰。

避坑提醒 #

别用已被弃用的target-densitydpi=device-dpi属性，这个属性早就被标准淘汰，在现代浏览器（包括移动端）支持性很差，反而会带来更多兼容问题。

内容的提问来源于stack exchange，提问作者qadenza