让pc端代码适用移动端——<meta name="viewport"
写的代码,在pc端运行正常,在移动端就很小很小,需要放大。这时候可引入这个标签
用法,在<head></head>中添加<meta name="viewport"标签,如
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=10.2">
各项含义:
width | 设置layout viewport 的宽度,为一个正整数,或字符串"width-device" |
initial-scale | 设置页面的初始缩放值,为一个数字,可以带小数 |
minimum-scale | 允许用户的最小缩放值,为一个数字,可以带小数 |
maximum-scale | 允许用户的最大缩放值,为一个数字,可以带小数 |
height | 设置layout viewport 的高度,这个属性对我们并不重要,很少使用 |
user-scalable | 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许 |
让pc端代码适用移动端——<meta name="viewport"的更多相关文章
- HBase 协处理器编程详解第一部分:Server 端代码编写
Hbase 协处理器 Coprocessor 简介 HBase 是一款基于 Hadoop 的 key-value 数据库,它提供了对 HDFS 上数据的高效随机读写服务,完美地填补了 Hadoop M ...
- 移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签)
移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签) 一.总结 一句话总结: 添加viewport标签:meta name="viewport" ...
- 腾讯首页分辨手机端与pc端代码
腾讯首页分辨手机端与pc端代码 自己在做网页的时候在腾讯网首页借鉴的代码. 代码: <!-- 移动适配JS脚本 --> <script type="text/javascr ...
- 关于H5从PC端切换到移动端,屏幕显示内容由横向转为竖向的研究!
1.前言: 在项目中,我们常会遇见在手机端需要横屏观看的效果,而在pc端则默认切换到竖屏的样式. 或者是,UI提供的图是一个长图,但是在移动端我们需要让这个图在手机横屏时显示. 以上两个都需要我们实行 ...
- 让PC版网站在移动端原样式显示
一般PC网站在移动端显示效果往往和PC版原样式不同,为了在移动端下还原原PC站样式,可以采用以下方式解决: 1) 去掉页头的: <meta name="viewport" c ...
- h5 移动端开发自适应 meta name="viewport"的使用总结
本文系个人理解,可能有误差,仅供参考,谨慎采纳! 布局视口: 系统自带 一般大于屏幕宽度 理想宽度: 设置页面的viewport 的一个宽度,使不同的手机的布局视口宽度尽量接近可视窗口的值: 可视视 ...
- pc端页面在移动端显示问题
1.pc端页面在移动端显示,默认视口宽度是980px(也就是body宽度是980px),可通过meta标签设置为需要的尺寸,比如页面中元素最大宽度是1220px,则如下所示 <meta name ...
- HTML5 Mobile 适应移动端的屏幕<meta name='viewport' content='xxxx'>
网页手机wap2.0网页的head里加入下面这条元标签,在移动端的浏览器中页面将以原始大小显示,并不允许缩放. 加入 如下代码 即可自适应移动端的屏幕: <meta name="vie ...
- PC端和移动APP端CSS样式初始化
CSS样式初始化分为PC端和移动APP端 1.PC端:使用Normalize.css Normalize.css是一种CSS reset的替代方案. 我们创造normalize.css有下面这几个目的 ...
随机推荐
- 八.Protobuf3更新消息类型(添加新的字段)
Protobuf3 更新消息类型 如果现有的消息类型不满足你的所有需求——例如,你希望消息格式有一个额外的字段——但是你仍然希望使用用旧格式创建的代码,别担心!在不破坏任何现有代码的情况下更新消息类型 ...
- jdk1.6文档官方下载资源
JDK1.6官方下载_JDK6官方下载地址:http://www.java.net/download/jdk6/6u10/promoted/b32/binaries/jdk-6u10-rc2-bin- ...
- laravel5.8 编译laravel mix
如果第一次无需执行(如果编译的时候出错再次执行才需要) 1:rm -rf node_modules 更改镜像为淘宝镜像 2:yarn config set registry https://regis ...
- FasfDFS整合Java实现文件上传下载功能实例详解
https://www.jb51.net/article/120675.htm 在上篇文章给大家介绍了FastDFS安装和配置整合Nginx-1.13.3的方法,大家可以点击查看下. 今天使用Java ...
- 华东交通大学 2019 I 不要666 数位dp进阶
Problem Description 题库链接 666是一个网络用语,用来形容某人或某物很厉害很牛.而在西方,666指魔鬼,撒旦和灵魂,是不吉利的象征.所以邓志聪并不喜欢任何与6有关的数字.什么数字 ...
- 洛谷 P1120 小木棍 dfs+剪枝
Problem Description [题目链接] https://www.luogu.com.cn/problem/P1120 乔治有一些同样长的小木棍,他把这些木棍随意砍成几段,直到每段的长都不 ...
- 1-STM32物联网开发WIFI+GPRS(Wi-Fi入门篇)_简介
这期的教程为公开教程将用这块开发板学习WIFI(SDK) 实现哪些功能呢!无非就是那写网络功能...但是涉及的挺多 最近一直在忙方案篇的内容,所以公开版的例程耽误了,现在开始补上 我准备改变一下提供资 ...
- linux ftp启用和停用及vsftpd安装 ssh 启用和停用命令及ssh的安装
1.首页要用ftp:服务器上必须安装vsftpd 安装命令 yum installed vsftpd 查看vsftpd是否启动 root@DK:/home/daokr# service vsftpd ...
- shell脚本的参数传递使用
1.params.sh源码如下 #!/bin/bash # author:daokr # url:www.daokr.com echo "Shell 传递参数实例!"; echo ...
- svg坐标转换
本文内容转自 how-to-translate-from-dom-to-svg-coordinates-and-back-again svg coordinate system Why we need ...