2017年09月25日 11:30:27 Goddess_liangyanli 阅读数：7324 标签： 手机
 
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinat_39430615/article/details/78083412
  1. <meta name="viewport" content="width=device-width,initial-scale=1">
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

在网页的<head>中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。

其中：

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

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

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

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

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

如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：

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

页头横幅等的图片的宽度都设置成style="width:100%"，整个页面在设备上看起来就是全屏的了。

页面适应电脑和手机屏幕initial-scale 1：0 user-scalable=yes的更多相关文章

  1. asp.net 页面，文字自适应手机屏幕

    (1)在<head>和</head>之间插入代码. <meta name="viewport" content="width=device- ...

  2. js实现仿华为手机计算器，兼容电脑和手机屏幕

    效果图: 电脑端: 手机端: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  3. JS获取电脑或手机屏幕的分辨率

    s = " 屏幕分辨率的高:"+ window.screen.height+"\n"; s += " 屏幕分辨率的宽:"+ window.s ...

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

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

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

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

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

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

  7. 在电脑上操作手机屏幕scrcpy工具就搞定了

    手机安卓版本:10 电脑:win64 使用步骤 电脑步骤 下载scrcpy scrcpy 是免费开源的投屏软件,支持将安卓手机屏幕投放在 Windows.macOS.GNU/Linux 上,并可直接借 ...

  8. 相机拍的图，电脑上画的图，word里的文字，电脑屏幕，手机屏幕，相机屏幕显示大小一切的一切都搞明白了！

    相机拍的图,电脑上画的图,word里的文字,电脑屏幕,手机屏幕,相机屏幕显示大小一切的一切都搞明白了! 先说图片X×dpi=点数dotX是图片实际尺寸,简单点,我们只算图片的高吧,比如说拍了张图片14 ...

  9. web页面自适应手机屏幕宽度

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...

随机推荐

  1. 当弹出的div失去焦点的时候自动隐藏

    jquery: $("#button").click(function(event){ $("#box").show(); event.stopPropagat ...

  2. [蓝桥杯]ALGO-8.算法训练_操作格子

    题目描述: 问题描述 有n个格子,从左到右放成一排,编号为1-n. 共有m次操作,有3种操作类型: .修改一个格子的权值, .求连续一段格子权值和, .求连续一段格子的最大值. 对于每个2.3操作输出 ...

  3. LeetCode——1. Two Sum

    一.题目链接:https://leetcode.com/articles/two-sum/ 二.题目大意: 给定一个int型数组A和int值a,要求从A中找到两个数,使得这两个数值的和为a:返回结果为 ...

  4. C++进阶--Koenig lookup 依赖于实参的名字查找

    //############################################################################ /* * Koenig Lookup / ...

  5. mysql备份学习笔记及xtrabackup安装

    (参考书籍:<深入浅出MySQL>) 一.备份恢复策略 a)      确定要备份的表的存储引擎是事务型还是非事务型 b)      确定使用全备份还是增量备份 c)      定期做备份 ...

  6. P2412高精度减法

    传送门 因为忘了带书回家,所以因为这道题我卡了半小时所以写篇博客“纪念”下 高精度减法中,如果被减数比减数小,就要用减数减去被减数.接下来的判断就是本题的核心.直接用strcmp是不行的,例如100与 ...

  7. vue之文本渲染

    Vue使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据.所有Vue的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析. 在前面,我们一直使用的是{ ...

  8. 运用PowerDesigner的反向工程，可以导入SQL脚本，从而生成物理模型

    运用PowerDesigner的反向工程,可以导入SQL脚本,从而生成物理模型.方法/步骤 首先打开PowerDesigner,点击左上角“File”—>"Reverse Engine ...

  9. Android 使用自定义字体

    整个项目要使用第三方字体首先将字体文件放到assets文件夹下 因为整个项目要用第三方字体这里我重写了 TextView Button EditText 三个控件 以TextView 为例代码如下   ...

  10. [UE4]手柄导航 Navigation

    Navigation是对应游戏手柄.Left.Right.Up.Down.Next.Previous分别对应游戏手柄上的左.右.上.下.下一个.上一个按键. Left.Right.Up.Down.Ne ...