有时候我们会纠结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. (3)安装elastic6.1.3及插件kibana,x-pack,essql,head,bigdesk,cerebro,ik

    6安装nginx 6.1安装nginx 安装 pcre,zlib,openssl,nginx 6.2生成web访问用户密码 htpasswd –c –b /usr/local/nginx/conf/p ...

  2. jupyter编辑快捷键

    Jupyter笔记本有两种不同的键盘输入模式. 编辑模式允许您将代码或文本输入到一个单元格中,并通过一个绿色的单元格来表示 命令模式将键盘与笔记本级命令绑定在一起,并通过一个灰色的单元格边界显示,该边 ...

  3. Github 入门1 （下载git , 连接本地库与github仓库）

    /* 本篇建立在以注册GitHub账号的前提下*/ (1)  下载 git  https://www.git-scm.com // win10 可以直接红色箭头标识的 Download 2.22.0 ...

  4. 提交第一个spark作业到集群运行

    写在前面 接触spark有一段时间了,但是一直都没有真正意义上的在集群上面跑自己编写的代码.今天在本地使用scala编写一个简单的WordCount程序.然后,打包提交到集群上面跑一下... 在本地使 ...

  5. JsonConfig的jsonConfig.setExcludes的用法

    1.问题描述 在项目中经常会有两个类存在一对多或者多对一的关联关系,这样在查询多的一方时,会深入查询关联的一方,而我们可能并不需要去深入查询那些数据,此时使用JsonConfig的jsonConfig ...

  6. 《你不知道的JavaScript》笔记（一）

    用了一个星期把<你不知道的JavaScript>看完了,但是留下了很多疑惑,于是又带着这些疑惑回头看JavaScript的内容,略有所获. 第二遍阅读这本书,希望自己能够有更为深刻的理解. ...

  7. 在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript

    需求描述: 用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示,具体表现如下图: 如果如果输入框内容有一项为空,弹出对话框‘请将数据填入完全 步骤: 1.按钮注册单击事件 2.获取并判断 ...

  8. 根据vue-cli手摸手实现一个自己的脚手架

    故事背景 身为一个入门前端七个月的小菜鸡,在我入门前端的第一天就接触到了vue,并且死皮赖脸的跟他打了这么久的交到,还记得第一次用vue init webpack 这句命令一下生成一个模板的时候那种心 ...

  9. 使用gtest(googletest)进行c++单元测试

    这是系列文章的第三篇,前两篇https://www.cnblogs.com/gaopang/p/11243367.html和https://www.cnblogs.com/gaopang/p/1158 ...

  10. ['1', '2', '3'].map(parseInt) what & why ?

    这是今天在 Advanced-Frontend组织 看到一个比较有意思的题目.主要是讲JS的映射与解析早在 2013年, 加里·伯恩哈德就在微博上发布了以下代码段: ['10','10','10',' ...