在 PC 端浏览器中,initial-scale 属性真的只对移动设备有效吗?
html 中 initial-scale 不仅限于移动端
在 HTML 中,通过 标签中的 viewport 属性控制网页的显示和缩放行为,initial-scale 属性用于设置网页初始缩放比例。通常认为 initial-scale 仅适用于移动设备,但实测表明在 PC 端的 Chrome 浏览器中同样生效。
测试代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=0.3"> <title>Document</title> </head> <body> <div style="height: 100px;width: 100px;background-color: blanchedalmond;">宽高100px</div> </body> </html>
运行结果
在 Chrome PC 端中,测试代码呈现为缩放比例为 0.3 的页面,而禁用模拟移动端后,页面缩放不生效。
解释
查看 标签的文档可发现,viewport 属性主要用于处理手机等窄屏设备。虽然 initial-scale 通常与移动端相关,但其本质是指定初始缩放比例,这在任何设备上都适用。因此,即使在 PC 端,正常情况下 initial-scale 也能正常生效。
以上就是在 PC 端浏览器中,initial-scale 属性真的只对移动设备有效吗?的详细内容,更多请关注其它相关文章!