这是今天遇到的一个问题，记录一下
设计稿是按照750设计的，界面也是按照750开发的，但是为什么线上界面显示宽度是980？
问题界面示例
重新去翻了下静态文件，发现静态文件不存在这个问题，以iphone6为例，显示宽度正常，为375。
那就去线上找问题吧，应该是在后期开发过程中产生的。通过查找发现在<head>部分丢掉了一段内容：
按设备大小缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
原因：我们大部分移动设备默认的viewport都是980px。
PC页面到手机页面会等比列的缩小，原先电脑如何显示那么在手机上就如何显示，所以手机就会“模拟”980px的宽度去显示，至于为什么是980px，那得去问下浏览器设计大佬了。
也由此可见，虽然这个按设备大小缩放的代码在开发H5的时候是必备的，但是自己在平时开发当中没有深究过，以至于这次遇到这样简单的问题还一脸懵。
这是今天遇到的一个问题，记录一下设计稿是按照750设计的，界面也是按照750开发的，但是为什么线上界面显示宽度是9...
01 一、meta 标签的相关知识 1、移动端视口宽度等于设备宽度，并禁止缩放。 
视觉视口是浏览器确定的，默认980px mate控制布局视口宽度width=320 布局宽度是320device-...
1.meta标签 移动端加上这个标签才是真正的自适应，不加的话，假如你把一个980px宽度(手机端常规是980)的...
一、视口 1.1、视口的概念视口 是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px...
viewport有三种，手机浏览器自带的viewport，默认宽度是980px或者1024px等，但手机窗口会比较...
viewport 视口(可视区窗口) 默认不设置viewport一般可视区宽度在移动端是980width 可视区的...
移动端基本环境 viewport 视口 可视区窗口 默认不设置, 一般可视区宽度在移动端是980 参数: widt...
移动端与PC端页面布局区别 视口视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980p...
脚本实现自动创建移动端适配的相关文件 概述 手机上显示网页是将整个网页缩小，模拟页面宽度 980px ，可以使用 ...
本文标题：手机端视口宽度980的问题
本文链接：https://www.haomeiwen.com/subject/wvzszktx.html
网友评论