有时候我们会纠结PC页面在手机页面上无法正常显示，超出屏幕，有些内容看不到，现在又了下面的代码，可以做到自适应手机端的屏幕宽度：

在html的<head>中增加一个meta标签：

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” />

可以让网页的宽度自动适应手机端的屏幕的宽度。

其中：
width=device-width ：表示宽度是设备屏幕的宽度

initial-scale=1.0：表示初始的缩放比例

minimum-scale=0.5：表示最小的缩放比例

maximum-scale=2.0：表示最大的缩放比例

user-scalable=yes：表示用户是否可以调整缩放比例

如果是想要一打开网页，则自动以原始比例显示，并且不允许用户拖动和放大缩小的话，则是：

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

较常用的是上面这句。

这样就可以了，就能将网页的宽度放到手机上，就自己自适应了。

使PC端网页宽度自适应手机屏幕大小的更多相关文章

  1. 移动端H5页面自适应手机屏幕宽度

    1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点击菜单中的preferences下的browse packages,选择cssrem-master,添加或者编写cssrem ...

  2. 移动页面HTML5自适应手机屏幕宽度

    标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的, ...

  3. PC端轻松控制Android手机，PC Control Andoroid，PC控制安卓手机

    记录此次经历的目的是帮助需要的人或下次使用时少走弯路,我为此试用了不少工具及方法,因为追求免费,像"Weak Control:在PC上控制你的Android手机"还要收费的我就不弄 ...

  4. 【Javascript Demo】移动端访问PC端网页时跳转到对应的移动端网页

    不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式. 1.效果图 PC ...

  5. 网络爬虫中Fiddler抓取PC端网页数据包与手机端APP数据包

    1 引言 在编写网络爬虫时,第一步(也是极为关键一步)就是对网络的请求(request)和回复(response)进行分析,寻找其中的规律,然后才能通过网络爬虫进行模拟.浏览器大多也自带有调试工具可以 ...

  6. flexible.js在华某为手机上使用rem时，页面宽度超出手机屏幕宽度

    问题:手机端项目在华为的某款手机上显示时页面内容没有自适应手机宽度,出现横向滚动条 原因:手机获取手机屏幕宽度并计算出rem时出现偏差,明显宽余真实手机屏宽度 解决方案一:在页面里获取页面最外层dom ...

  7. 移动端网页宽度值（未加meta viewport标签）

    移动端网页宽度值(未加meta viewport标签): iphone:980px Galaxy(盖乐世):980px Nexus:980px blackberry(黑莓):980px LG:980p ...

  8. Java SpringMVC实现PC端网页微信扫码支付完整版

    一:前期微信支付扫盲知识 前提条件是已经有申请了微信支付功能的公众号,然后我们需要得到公众号APPID和微信商户号,这个分别在微信公众号和微信支付商家平台上面可以发现.其实在你申请成功支付功能之后,微 ...

  9. 取得DisplayMerics手机屏幕大小的应用

    DisplayMerics:A structure describing general information about a display, such as its size, density, ...

随机推荐

  1. 在.NET Core中使用DispatchProxy“实现”非公开的接口

    原文地址:"Implementing" a non-public interface in .NET Core with DispatchProxy 原文作者:Filip W. 译 ...

  2. 关于WebApi的跨域问题

    前端调用我后端接口时出现200,跨域问题 解决方案: 在webconfig中加入以下配置就OK了 <configuration> <system.webServer> < ...

  3. java 数组定义

    1.方式一: 数组声明: int[] intArr ; String [] strArr; int [][] intArrs; 数组初始化: intArr = new int[6]; //一维数组 s ...

  4. Player的跟踪狂 -- Camera

    P.S.很多游戏里的Player都会设置的被跟踪,是人性的扭曲,还是XXX,正在解密. 第三人称视角 camera紧跟player背后(角度随player改变) using System.Collec ...

  5. idea 环境变量设置编码

    1.打开Run/Debug Configuration,选择你的tomcat 2.然后在  Server > VM options 设置为 -Dfile.encoding=UTF-8

  6. 前端使用lodop插件进行打印设置

    先前梳理了后台打印导出参考:https://www.cnblogs.com/yyk1226/p/9856032.html,但是没有显示出来打印预览页面. 本章使用Lodop插件进行打印设置,实现打印机 ...

  7. 【钢琴伴奏基本形态和伴奏织体】技能 get

    开头重复一句话:做编曲就是设计和声+伴奏织体. ---- --------- --------------- 分解和弦: 半分解和弦: 做法:在旋律的下方演奏一些和弦的音.就能让音乐更加的饱满,拒绝空 ...

  8. C++——指针

    目录 一.地址和指针 1.1内存 1.2针和指针变量 二.指针变量 2.1始化 2.2赋值 2.3指针类型算术运算 2.4指针类型关系运算 2.5指向指针的指针 三.指针与数组 3.1指针运算 3.2 ...

  9. python串口助手

    最近项目中要使用模拟数据源通过向外发送数据,以前都是用C#编写,最近在研究python,所以就用python写了一个串口助手,方便以后的测试. 在电脑上通过虚拟串口助手产生两个虚拟串口,运行编写的串口 ...

  10. 洛谷 P2145 [JSOI2007]祖码

    题目描述 这是一个流行在Jsoi的游戏,名称为祖玛. 精致细腻的背景,外加神秘的印加音乐衬托,彷佛置身在古老的国度里面,进行一个神秘的游戏——这就是著名的祖玛游戏.祖玛游戏的主角是一只石青蛙,石青蛙会 ...