页面适应电脑和手机屏幕initial-scale 1：0 user-scalable=yes
- <meta name="viewport" content="width=device-width,initial-scale=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：表示用户是否可以调整缩放比例
如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：
- <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的更多相关文章
- asp.net 页面，文字自适应手机屏幕
(1)在<head>和</head>之间插入代码. <meta name="viewport" content="width=device- ...
- js实现仿华为手机计算器，兼容电脑和手机屏幕
效果图: 电脑端: 手机端: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- JS获取电脑或手机屏幕的分辨率
s = " 屏幕分辨率的高:"+ window.screen.height+"\n"; s += " 屏幕分辨率的宽:"+ window.s ...
- flexible.js在华某为手机上使用rem时，页面宽度超出手机屏幕宽度
问题:手机端项目在华为的某款手机上显示时页面内容没有自适应手机宽度,出现横向滚动条 原因:手机获取手机屏幕宽度并计算出rem时出现偏差,明显宽余真实手机屏宽度 解决方案一:在页面里获取页面最外层dom ...
- 移动页面HTML5自适应手机屏幕宽度
标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的, ...
- 移动端H5页面自适应手机屏幕宽度
1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点击菜单中的preferences下的browse packages,选择cssrem-master,添加或者编写cssrem ...
- 在电脑上操作手机屏幕scrcpy工具就搞定了
手机安卓版本:10 电脑:win64 使用步骤 电脑步骤 下载scrcpy scrcpy 是免费开源的投屏软件,支持将安卓手机屏幕投放在 Windows.macOS.GNU/Linux 上,并可直接借 ...
- 相机拍的图，电脑上画的图，word里的文字，电脑屏幕，手机屏幕，相机屏幕显示大小一切的一切都搞明白了！
相机拍的图,电脑上画的图,word里的文字,电脑屏幕,手机屏幕,相机屏幕显示大小一切的一切都搞明白了! 先说图片X×dpi=点数dotX是图片实际尺寸,简单点,我们只算图片的高吧,比如说拍了张图片14 ...
- web页面自适应手机屏幕宽度
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...
随机推荐
- 【spring boot】映射properties文件属性--到Java对象
描述 将*.properties中的内容映射到java对象中: 主要步骤 添加 @Component 注解: 使用 @PropertySource 注解指定配置文件位置: 使用 @Configurat ...
- Qt学习——QListWidget控件的使用
转载:GDUTLYP Qt提供QListWidget类列表框控件用来加载并显示多个列表项.QListWidgetItem类就是列表项类. 一般列表框控件中的列表项有两种加载方式: 一种是由用户手动添加 ...
- Service Mesh简介
1.1 Service Mesh 1.1.1 什么是Service Mesh Service Mesh是最近才兴起的一个名词,最早在2016年9月29日由开发Linkerd的Buoyant公司首次 ...
- 信息安全-加密：AES 加密
ylbtech-信息安全-加密:AES 加密 高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法,是美国联邦政府采用的一 ...
- es6 class函数的用法，及兼容程度
//es6中 class的新特性:面向对象的方式 class name{ fram(){ var div=document.getElementById("div"); div.s ...
- CentOS 7安装Oracle 11gR2以及设置自启动（2）
6.创建表空间和用户授权 (1).连接数据库 $ sqlplus / as sysdba (2).创建数据库表空间 语法: create tablespace 表空间名 datafile ‘物理地址( ...
- google最新的书签导入导出
1.google浏览器地址栏最右边,自定义及控制--->书签----->书签管理器 2. 右上角,有整理图标, 3.点击按钮即可导入导出书签
- 升级安装APK兼容Android7.0，解决FileUriExposedException
见http://blog.csdn.net/ruancoder/article/details/67639621?utm_source=itdadao&utm_medium=referral
- （转）区分LTE,EPS,EPC和SAE
LTE:Long Term Evolution长期演进,是无线接口部分向4G演进的工作项目. 3GPP:The 3Rd Generation Partnership Project,第三代合作伙伴计划 ...
- cocos源码分析--用Sprite加载自定义着色器
本文写一个使用动态更新属性变量的自定义着色器.在这个例子中,小图标的位置根据手指的触摸而移动,以屏幕重点为参照物,屏幕中向下的部分根据手指的点击乘以一个绿色的颜色值,向上的部分乘以一个红色的颜色值. ...