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. Zuul Read Time out 错误

    只改application.yml文件即可: eureka: client: serviceUrl: defaultZone: http://localhost:7087/eureka/ server ...

  2. 微服务之分布式跟踪系统（springboot+zipkin+mysql）

    通过上一节<微服务之分布式跟踪系统(springboot+zipkin)>我们简单熟悉了zipkin的使用,但是收集的数据都保存在内存中重启后数据丢失,不过zipkin的Storage除了 ...

  3. 【ZZ】堆和堆的应用：堆排序和优先队列

    堆和堆的应用:堆排序和优先队列 https://mp.weixin.qq.com/s/dM8IHEN95IvzQaUKH5zVXw 堆和堆的应用:堆排序和优先队列 2018-02-27 算法与数据结构 ...

  4. 在HP-UX 11.11用swinstall安装gcc 4.2.3

    agent60 在linux上执行不了,原因是操作系统内核版本不一致,需要重新编译包. file $SHELL 显示  PA-RISC1.1 在HP-UX 11.31 PA-RISC1.1 版本中 编 ...

  5. HDOJ 2002 计算球体积

    #include<cstdio> #define PI 3.1415927 int main() { double r; while (scanf_s("%lf", & ...

  6. [UE4]移动相机，使用Arrow组件来标记移动位置

    一.创建一个Arrow组件来标记要移动的位置(Arrow的用法之一就是用来标注坐标). 二.使用TimeLine时间轴结合插值Lerp来移动相机

  7. [UE4]UI之间传递数据

    通过创建对方UI类型的变量引用,初始本控件时赋值该变量,就可以对方UI内的方法了.

  8. U3D学习005——输入操作

    1.input管理器 edit-project settings-input 2.getaxis——虚拟轴获取 获取水平和垂直的输入和其他输入(input管理器中定义的) 3.对象的transform ...

  9. saliency map [转]

    基于Keras实现的代码文档 (图+说明) "Deep Inside Convolutional Networks: Visualising Image Classification Mod ...

  10. 用微信小程序连接WordPress网站

    随着微信小程序的功能越来越强,特别对个人开发者的开放,让个人开发者有机会尝试微信小程序.如果你有自己的个人网站,就可以把个人网站搬到微信小程序里,通过小程序直接访问网站的内容. 要想微信小程序可以获取 ...