开发响应式页面移动端需要注意的几个点

本文探讨了手机浏览器自动缩放的历史原因及其对网页显示的影响,并提供了一段meta标签代码,用于禁止浏览器的自动缩放功能,确保网页在手机上的正确显示。

1. 添加禁止浏览器主动缩放功能

涉及到网页开发历史遗留问题,最开始的手机浏览器网页是直接访问电脑网页或访问专门为诺基亚手机开发的WAP页面,对于电脑网页由于手机分辨率太低,浏览器会使用缩放页面的方式来展示原页面,这个也是为什么在手机页面上直接使用document.documentElement.clientWidth获取到的值为 980(之所以是这个值也是因为国外做过调查,那个时候的网页一般宽度都在980px左右
),所以为了避免浏览器的自动缩放,需要在手机端<head>内添加一行以下代码:

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum=1.0,minimum=1.0" />

转载于:https://www.cnblogs.com/YooHoeh/p/10465734.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值