pc网页调整为手机模式

已于 2022-08-09 15:45:40 修改
阅读量1.1w 收藏 2
点赞数 2
分类专栏： 测试经验笔记
于 2022-06-22 11:25:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60402142/article/details/125405690
版权

谷歌浏览器 调试工具 手机模式 分辨率 开发者工具
关键词由CSDN通过智能技术生成

谷歌浏览器打开网页后，键盘F12打开调试，调试界面左上角点击【Toggle device toolbar】按钮，或者键盘【Ctrl+Shift+M】，操作后，网页顶部有变化

可以选择任一选项

选择后，网页就会变成手机模式

也可以输入对应的分辨率，查看页面效果（一些特定分辨率的大屏会需要看效果）

手可摘星_橙
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自动切换电脑版手机版网页(PHP、ASP)
04-03
自动切换电脑版手机版网页(PHP、ASP)
使电脑浏览器变成手机的App浏览器(修改电脑浏览器UA）user-agent
11-22
使电脑浏览器变成手机的App浏览器(修改电脑浏览器UA）user-agent
chrome浏览器：在电脑浏览器和移动端浏览器之间切换
最新发布
听海边涛声
06-24 333
chrome浏览器：在电脑浏览器和移动端浏览器之间切换
带你一步步从PC（电脑）网页自适应到手机端网页（小白入门必看）
热门推荐
梁先森的博客
09-20 4万+
最近帮老师改个网站，将PC端网页改为手机端网页，虽然对于有一定开发经验的前端开发者是很easy的事情，但是呢，对于小白来说，还是很一头雾水的。下面咱们就从头来进行实战，看看自适应到手机端到底是怎么回事！ 开发必备工具： chrome浏览器 一部手机 CSS手册（推荐菜鸟教程-CSS手册） 好了，咱们开始吧！ 1、首先我先在电脑上打开网页 2、接下来使用chrome浏览器自带的手机模拟器看看这个网...
自媒体博客pc版转成手机版的三种方法
davade2046的博客
06-24 1320
现在做自媒体博客的朋友有很多，可是，大家的自媒体博客都是PC版，只适用于电脑，平板上面，对于手机来说的话就不适合了，影响用户体验。下面，小编就教大家三种方法把自媒体博客PC版转换成手机版网站。 　　前段时间经常有朋友问我要搜狐快站的视频教程，因为他们的博客只有PC版的，没有手机版的，看到我的邵连虎博客手机版网站感觉不错，也想弄一个。其实，在我的博客没有手机版的时候我就发现，PC网站在手机上看
PC浏览器调整Android的界面,在电脑上调试手机端页面
weixin_29337315的博客
05-28 883
这一篇是使用谷歌调试工具进行手机页面调试的文章，主要是转载了谷歌的说明，主要使用谷歌浏览器PC端，和谷歌浏览器Android端，原页面在安卓设备上使用 Chrome 远程调试功能你的网页内容在移动设备上的体验可能和电脑上完全不同。Chrome DevTools 提供了远程调试功能，这让你可以在安卓设备上实时调试开发的内容。安卓远程调试支持：在浏览器选项卡中调试网站。在原生安卓应用中调试网页内容。将...
实现手机页面转换
weixin_30254435的博客
03-28 72
新建两个布局文件 main.xml,main2.xml res/layout/main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientati...
【JavaScript】通过JavaScript的方式，如果手机浏览器访问PC版页面，自动跳转到手机版页面
编程记录，亲测有效
05-07 6065
这个其实根本不用自己写，因为在网上就有一个写的非常不错的js。 做到如下效果，如果是PC、平板访问这个页面，则显示PC版的页面，如果是手机访问这个页面则跳到手机版的页面，同时不加载PC版页面，直接跳转。 首先，目录结构如下： 其中JS文件夹中的uaredirect.js是从网上down下来的，其代码如下： function uaredirect(f){try{if(docu
一天完成把PC网站改为自适应！原来这么简单！
weixin_34306676的博客
07-28 2898
http://www.webkaka.com/blog/archives/how-to-modify-a-web-page-to-be-responsive.html   一天完成把PC网站改为自适应！原来这么简单！ 作者:Kaka    时间:2015-8-27 11:26:9    浏览:5279    评论:8 网站自适应，很多人都认为是很高级需要很多时间去实现的东西，不愿意...
JS：PC网站转化为手机自适应网页
Schon_zh的博客
09-28 1万+
方法一： web网页转化手机自适应网页三步走: 打开你需要制作手机网页的html或者php等等网页源码文件。在&amp;amp;amp;lt;head&amp;amp;amp;gt;&amp;amp;amp;lt;/head&amp;amp;amp;gt;之间加入meta标签。 向浏览器声明该网页为移动设备自适应网页的meta标签为： &amp;amp;amp;lt;meta name=&amp;amp;quot;viewport&amp;a
【Google Chrome】如何让浏览器显示手机网页
鸡窝
03-06 3万+
先前在网上爬文的时候看到过很多文章说在Chrome的快捷方式上加参数以达到显示手机网页的效果，总感觉有点不妥。 今天在老外网站上看到一篇文章，如何把各种浏览器变成手机模拟器，以达到显示手机网页的效果。这对于开发移动网页的童鞋是莫大的关怀，于是乎不敢独享。 首先贴上外网原文的地址，E文好的同学可以直接浏览。How to Change Your Browser’s User Agent Wit
手机PC兼容JS图片画廊特效
04-07
综上所述，手机PC兼容JS图片画廊特效是网页开发中一个实用的工具，它结合了触摸与键盘导航，提供了全屏模式，以适应各种设备和用户习惯。对于网页设计师和开发者来说，掌握这样的技术能有效提升网站的互动性和吸引力...
手机端PC端视频播放
01-26
HTML5的`<video>`标签为网页中的视频播放提供了原生支持，无需额外插件。它允许设置视频源（src）、控件、分辨率等属性，提供了一种跨平台的解决方案。 三、分端控制 1. 响应式设计：通过CSS3的媒体查询（Media ...
UC手机浏览器PC版
01-02
**UC手机浏览器PC版详解** ...总之，UC手机浏览器PC版以其高效的浏览速度、丰富的功能和良好的用户体验，成为了用户在电脑上浏览网页的不错选择。合理利用其各项特性，将使网络冲浪更加顺畅愉快。
非常酷手机书PC阅读器
09-17
【非常酷手机书PC阅读器】是一款专为个人计算机用户设计的电子书阅读软件，它提供了方便快捷的方式，让用户在电脑上轻松阅读手机格式的书籍。这款阅读器旨在解决手机电子书在大屏幕设备上阅读时可能出现的排版不适、...
pc手机上图片全屏放大
03-02
标题中的“pc手机上图片全屏放大”指的是在个人计算机（PC）和移动设备（手机）上实现图片的全屏浏览功能。这种功能通常通过JavaScript库和CSS样式来实现，以便用户可以方便地查看和欣赏图片，特别是在网页或应用中...
手机网站制作：PC网站怎么转成手机网站
张启亚个人博客
07-21 2212
随着智能手机的普遍使用，移动互联网用户的数量随之猛增。当我们关注PC电脑网站制作的时候，一定不要忘了制作一个手机网站。这样我们的网站用户就可以轻松使用手机浏览我们自己做的网站了。 很多站长之前是制作了一个PC网站，那么怎么将PC网站转成手机网站呢？下面介绍一下PC站转化为手机站的方法。 第一步：下载手机站转化插件WordPress Mobile Themes；这个插件的作用是自动判断用户的浏览设备，如果是手机就自动跳转到手机站。 第二步：进入网站后台安装手机站转化插件； 进入自己网站后台—插件—安装插件，
前端页面开发浅谈：PC 端设计如何“完美”迁移到移动端？_实现pc和移动端
2401_85124837的博客
06-11 159
【代码】前端页面开发浅谈：PC 端设计如何“完美”迁移到移动端？_实现pc和移动端。
如何把一个网页设置快捷方式放到桌面上去,或者手机桌面当App一样使用
欲寄彩笺兼尺素，山高水阔知何处
06-21 1万+
分别讲电脑端和手机端: 电脑端: 在尝试好几种方式后,还是觉得最最简单的方法,还是用电脑自带的方式不借助任何外力方便,利用谷歌的方式也讲一下哈(利用谷歌会有自己的图标这点不错); 其他方式: https://zh.wikihow.com/%E6%8A%8A%E7%BD%91%E7%AB%99%E7%9A%84%E5%BF%AB%E6%8D%B7%E6%96%B9%E5%BC%8F%E...
pc网页宽度适配手机宽度
05-30
要使PC网页宽度适配手机宽度，可以使用响应式设计技术。这种技术可以根据用户所使用的设备不同，自动调整网页的布局和样式，以适应不同的屏幕尺寸。其中一种常用的方法是使用CSS媒体查询，设置不同的样式规则来适应不同尺寸的屏幕。例如，可以使用max-width属性来设置最大宽度，以使网页在较小的屏幕上适当缩小。同时，还可以使用viewport元标签来设置初始缩放比例、宽度和高度，以更好地适配不同的设备。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值