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. 【maven】之打包不带版本号的问题

    今天在写maven项目的时候发现打包没有带版本号,只有包名 百思不得其解,我翻看之前的项目发现并没有这种情况,最后看了一下文档 发现是自己在build中写了fileName  导致的!删除自定义的fi ...

  2. googletest--测试控制

    有时候如果某个测试出现了异常,但是我们想继续其他的测试怎么办. 最简单的方法就是,在测试的名字前加上"DISABLED_",如下面的例子所示: // Test with fixtu ...

  3. 【Mysql】mysql使用触发器创建hash索引

    概述 若设计的数据表中,包含较长的字段,比如URL(通常都会比较长),查询时需要根据该字段进行过滤: select * from table_xxx where url = 'xxxxxxx'; 为了 ...

  4. 开启Unity3D之旅

    圣典知识目录http://game.ceeger.com/Manual/ NGUI http://www.taikr.com/course/34泰课课程 http://tieba.baidu.com/ ...

  5. 一篇对OAuth2.0开发实例的介绍

    今天看到了博友对SSO的文章,SSO单点登录的讲解突然想写一篇关于OAuth2.0用户授权的介绍. 应用场景:在APP或者网页接入一些第三方应用时,时长会需要用户登录另一个合作平台,比如QQ,微博,微 ...

  6. [转]Windows7：Visual Studio 2008试用版的评估期已经结束解决方法

    原文来自:http://blog.sina.com.cn/s/blog_6b1815080100y5z3.html     以前在Windows2003碰到这个问题时,都是到"控制面板→添加 ...

  7. etcd集群部署与遇到的坑(转)

    原文 https://www.cnblogs.com/breg/p/5728237.html etcd集群部署与遇到的坑 在k8s集群中使用了etcd作为数据中心,在实际操作中遇到了一些坑.今天记录一 ...

  8. 方法 - 调试Dll方法

    1.exe加载dll 2.Dll属性设置2.1运行exe生成Debug/...exe2.2属性->调试->命令-> 改成 ./Debug/调试Dll.exe ../Debug/调试D ...

  9. python直接下载图片到内存

    1. 使用requests(推荐) from PIL import Image import requests Image.open(requests.get(url, stream=True).ra ...

  10. 第8章 传输层（3）_TCP协议

    3. 传输控制协议(TCP) 3.1 TCP协议的主要特点 (1)TCP是面向连接的传输层协议.即使用TCP协议之前必须先建立TCP连接.在传送数据完毕之后,必须释放己经建立的TCP连接. (2)每一 ...