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. 【springboot】之 解析@EnableWebMvc 、WebMvcConfigurationSupport和WebMvcConfigurationAdapter

    springboot默认格式化日期只需要在application文件中配置 spring.jackson.date-format= yyyy-MM-dd HH:mm:ss spring.jackson ...

  2. C++进阶--placement new/delete

    //############################################################################ // Placement New 和 Pl ...

  3. Ubuntu 14.10 下安装伪分布式hdoop 2.5.0

    折腾了一天,其间配置SSH时候出现了问题,误删了ssh-keygen相关文件,导致配置SSH彻底萎了,又重装了系统.... 采用伪分布式模式,即hadoop将所有进程运行于同一台主机上,但此时Hado ...

  4. flume http source示例讲解

    一.介绍 flume自带的Http Source可以通过Http Post接收事件. 场景:对于有些应用程序环境,它可能不能部署Flume SDK及其依赖项,或客户端代码倾向于通过HTTP而不是Flu ...

  5. 廖雪峰Java2面向对象编程-6Java核心类-3包装类型

    Java的数据类型: 基本类型:int boolean float 引用类型:所有class类型 为一个基本类型int赋值为null,会提示"incompatible types" ...

  6. 微信7.0以上版本fiddler、Charles抓包报HTTPS证书信任问题通报

    通报:微信更新到7.0以后抓包公众号会有证书问题,抓包小程序直接不能打开 各位不用到处找了,也不用怀疑人生了,你没有问题.win10也没有问题.fiddler和Charles也没有问题,是因为微信更新 ...

  7. QoS 服务质量

    一.QoS QoS: Quality of Service(服务质量) 是指网络通信过程中,允许用户业务在丢包率.延迟.抖动和带宽等方面获得可预期的服务水平.更简单地说:QoS就是针对各种不同需求,提 ...

  8. 网站简介-为什么网站的ICO图标更新后，ie浏览器没有更新过来？

    为什么网站的ICO图标更新后,ie浏览器没有更新过来? 如何更新本地ico图标? 收藏夹里的网址访问后网站ico小图标怎么不会更新,还是没图标的. 如果制作了一个新的favicon.ico图标,并且已 ...

  9. 判断Service是否已经启动

     /** 查看服务是否开启*/    public static Boolean isServiceRunning(Context context, String serviceName) {     ...

  10. Shell IF条件判断解析

    IF条件判断 1.基本语法: if [ command ]; then #符合该条件执行的语句 fi2.扩展语法: if [ command ];then #符合该条件执行的语句 elif [ com ...