PC端页面切换成手机模式后，出行了一个莫名其妙的980px

最新推荐文章于 2024-06-11 15:42:53 发布
最新推荐文章于 2024-06-11 15:42:53 发布
阅读量2k 收藏 1
点赞数
分类专栏： 开发过程中遇到的问题 文章标签： 移动端默认布局视口
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webFront/article/details/94572249
版权

移动端的默认布局视口宽一般是980px，所以body的100%才是980px。
可以加这个 <meta name="viewport" content="width=1200, initial-scale=1.0">

子化诗理
关注
专栏目录
vue3 - 最新手机扫码PC网站二维码登录功能，用手机端扫描PC端vue3网页的登录二维码，然后在手机上点击“确认登录“完成登录，PC网页生成登录二维码，用户拿手机扫码，手机上点确定后电脑端做出响应
高级前端工程师
03-28 4304
vue3，uniapp，微信小程序，vue3+uniapp实现移动端+pc端互通扫码登录，微信扫码登录，手机扫电脑微信登录码登录功能，vue3手机微信扫码登录详细教程，如何实现微信扫码授权登录，手机小程序怎么和网页pc扫二维码登录互通监听手机端确认登录，vue3手机+网页扫码登录，pc微信网页授权，网站接入微信扫码登录功能详细教程，手机小程序扫网页二维码登录的原理，vue3接入微信扫码授权登录流程，vue使用手机app扫描二维码登录，微信扫码登录后获取信息数据，vue生成二维码实现手机APP扫码进行web网
PC端网页vue项目，页面滚动点击悬浮按钮最快的方法
孙叫兽的博客
05-29 3227
业务场景，可视化大屏右下角添加一个悬浮按钮，点击按钮页面滚动到顶部。 jin'guo'g
pc网页响应式在手机网页宽度980px问题方案
weixin_45527741的博客
05-09 805
pc网页响应式在手机网页宽度980px问题方案 html中加上如下代码： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 来源网页
前端页面开发浅谈：PC 端设计如何“完美”迁移到移动端？
白鹿第一帅的 CSDN 博客
05-12 4162
作为开发工程师与产品经理，我们需要站在产品本身与用户的角度对系统进行设计与思考，而非仅仅是为了满足某一项“迫切”的功能。如何才能使产品、程序员和用户都对 H5 页面满意？本文我们将从登陆页面开始，体会移动端开发的典型特征。
手机端的屏幕自适应(一)
weixin_30674525的博客
11-28 207
通过rem布局 只要引入这个代码： (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { ...
pc端页面移动端不适应解决方案
m0_57941469的博客
02-25 914
前两天做了一个网站，UI需求是既要大气的展现还要完整的内容，那就只能是做pc端页面了，最后发现手机端页面不兼容，网站头部和底部页面都是兼容的，中间的部分却特别宽，最后我的解决办法是利用<table>标签，也算是一个不错的方案吧，因为<table>标签是可以滑动的，而且应用也特别简单 <div style="width:100%;height:100%;overflow:auto;"> <table> <!--正文内容，取码网-
flexible.js适配pc端、移动端并自动将px转换rem 或者PC端px自动转vw
xiaoqin5的博客
10-10 1978
flexible.js适配pc端、移动端并自动将px转换rem 或者PC端px自动转vw
pc端html转换手机端,一种兼容PC端和手机端WEB界面的实现方法与流程
weixin_32790385的博客
06-03 3192
本发明涉及计算机互联网技术，特别涉及一种兼容PC端和手机端WEB界面的实现方法。背景技术：随着互联网的发展,越来越多的产品需要同时兼容PC端和手机端，目前使用的技术一般是响应式布局，复杂的界面，或者前端经常变换的页面，响应式的实现效果不是很好，会出现很多冗余的代码，并且有可能在PC端显示成功了，在移动端页面却不能很友好的显示，后期维护起来也没有那么简单，需要考虑各种适应性，这无疑是增加了开发人员的...
webpack多页面教你轻松打造一个vue项目同时跑出pc端和h5端
北极那企鹅丶
10-24 3617
写在前面的话   最近接到一个官网项目，有pc和h5两端，想着又要新开两个项目，一个放pc，一个放h5，然后发布的时候又要分开，不由得头大，忽然想起webpack不是有多页面嘛，干嘛不一个项目一个pc端页面，一个h5端页面，然后像图片资源，公共方法等等之类的不就可以共用了嘛，发布的时候也只需要打包一个就可以啦 ...
pc端ui图片尺寸_聊聊PC端页面适配
weixin_34675606的博客
02-19 3979
目也pc端有适配的需求：目前我们pc项目的设计稿尺寸是宽度1920，高度最小是1080。适配目标：1.在不同分辨率的电脑上，网页可以正常显示2.放大或者缩小屏幕，网页可以正常显示对于宽度的适配对于宽度适配：首先设置html,body{width:100%;overflow-x:hidden;}然后我们可以把页面分解为背景层(一般宽度都会大于1200px)和内容层(一般宽度都会小于1200px)，对...
前端页面开发浅谈：PC 端设计如何“完美”迁移到移动端？_实现pc和移动端
最新发布
2401_85124837的博客
06-11 236
【代码】前端页面开发浅谈：PC 端设计如何“完美”迁移到移动端？_实现pc和移动端。
VUE PC端项目px转为rem适应屏幕
张杰伦的博客
11-05 523
安装lib-flexible和postcss-pxtorem，这两个版本亲测可用 npm install --save autoprefixer@^9 npm install postcss-pxtorem@5.1.1 在main.js中引入 import 'lib-flexible/flexible' 修改node_modules中的lib-flexible/flexible文件中 原来的是适配移动端，修改为下面这样 function refreshRem(){ var w
Chrome调试模拟iPhone6时body显示980*1742
MeiBlog
07-25 159
原因 由于我们大部分移动设备默认的viewport都是980px 解决 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
如何解决PC端和移动端自适应问题？
github_36111469的博客
12-13 8478
如何解决PC端和移动端自适应问题？    做网页时，我们通常需要考虑到不同电脑屏幕尺寸，以及不同手机屏幕大小等问题，解决样式发生改变的情况，那么如何解决呢？现在主要是采用自适应来解决高度，宽度的，以及图片自适应问题，下面就PC端和移动端来总结一下，通常进行自适应高度和宽度，图片时，一般与页面的布局存在关系。 1、最小尺寸分辨率1024*768（传统17寸显示器），则可以采用94
viewport,html,body在pc和移动的差异
weixin_33898233的博客
12-26 465
2019独角兽企业重金招聘Python工程师标准>>> ...
把PC端网页放在手机端打开，会被整体缩小，为什么？如何不让它缩小？
weixin_44761231的博客
05-01 4053
把PC端网页放在手机端打开，会被整体缩小，为什么？如何不让它缩小？ 1、首先我们要知道把一个PC端的网站放到手机端需要经过两步： 第一步：把电脑端的网站放到虚拟容器中。（一个概念——视口：这个虚拟容器就叫做视口。） 这个虚拟容器的宽度是980px。这个980px是人为规定的，在手机出厂时就设置好的。 为什么是980px？因为早期的PC端显示器宽度是980px。 如果PC端网站宽度小于980px，完全可以放进这个虚拟容器里面。 如果PC端网站宽度等于980px，刚好可以放进这个虚拟容器里面。 如果PC
pc网页调整为手机模式
m0_60402142的博客
06-22 1万+
pc网页调整为手机模式
移动前端开发之viewport的深入理解
热门推荐
FFy's Blog
01-26 1万+
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个a
外贸网站建设中div宽度设为100%，手机或ipad显示只有980px的解决方法
01-16 4759
在外贸网站建设的时候，发现在 iPad 的 Safari 浏览器中背景显示不全，定位到该 div 后发现所指定 css 的宽度为 100%, 到百度搜索后发现，safari 中 viewport 默认宽度为 980px，若事先未指定其初始 viewport 宽度，则会默认按照 980px 处理。 可以默认初始化 viewport 宽度或在 css 中设定 min-width，但最简单的方法可以
Css 针对一个官网显示的页面，给出pc端iPad 手机端适配
05-25
针对一个官网显示的页面，给出 PC端、iPad和手机端的适配方案，可以采用响应式设计的方式进行实现。具体实现步骤如下： 1. 设置viewport 在head标签中设置viewport元标记，使得页面能够根据设备尺寸进行缩放，例如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值