写的代码,在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"的更多相关文章

  1. HBase 协处理器编程详解第一部分:Server 端代码编写

    Hbase 协处理器 Coprocessor 简介 HBase 是一款基于 Hadoop 的 key-value 数据库,它提供了对 HDFS 上数据的高效随机读写服务,完美地填补了 Hadoop M ...

  2. 移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签)

    移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签) 一.总结 一句话总结: 添加viewport标签:meta name="viewport" ...

  3. 腾讯首页分辨手机端与pc端代码

    腾讯首页分辨手机端与pc端代码 自己在做网页的时候在腾讯网首页借鉴的代码. 代码: <!-- 移动适配JS脚本 --> <script type="text/javascr ...

  4. 关于H5从PC端切换到移动端,屏幕显示内容由横向转为竖向的研究!

    1.前言: 在项目中,我们常会遇见在手机端需要横屏观看的效果,而在pc端则默认切换到竖屏的样式. 或者是,UI提供的图是一个长图,但是在移动端我们需要让这个图在手机横屏时显示. 以上两个都需要我们实行 ...

  5. 让PC版网站在移动端原样式显示

    一般PC网站在移动端显示效果往往和PC版原样式不同,为了在移动端下还原原PC站样式,可以采用以下方式解决: 1) 去掉页头的: <meta name="viewport" c ...

  6. h5 移动端开发自适应 meta name="viewport"的使用总结

    本文系个人理解,可能有误差,仅供参考,谨慎采纳! 布局视口: 系统自带 一般大于屏幕宽度 理想宽度:  设置页面的viewport 的一个宽度,使不同的手机的布局视口宽度尽量接近可视窗口的值: 可视视 ...

  7. pc端页面在移动端显示问题

    1.pc端页面在移动端显示,默认视口宽度是980px(也就是body宽度是980px),可通过meta标签设置为需要的尺寸,比如页面中元素最大宽度是1220px,则如下所示 <meta name ...

  8. HTML5 Mobile 适应移动端的屏幕<meta name='viewport' content='xxxx'>

    网页手机wap2.0网页的head里加入下面这条元标签,在移动端的浏览器中页面将以原始大小显示,并不允许缩放. 加入 如下代码 即可自适应移动端的屏幕: <meta name="vie ...

  9. PC端和移动APP端CSS样式初始化

    CSS样式初始化分为PC端和移动APP端 1.PC端:使用Normalize.css Normalize.css是一种CSS reset的替代方案. 我们创造normalize.css有下面这几个目的 ...

随机推荐

  1. Python读取csv内容

    #encoding:utf-8 import csv csv_file=csv.reader(open("d://wu.csv","r"))print(csv_ ...

  2. 使用systemctl管理nginx

    [Unit] Description=nginx After=network.target [Service] Type=forking ExecStartPre=/data/apps/nginx/s ...

  3. keepalived 的 vrrp_script

    [root@centos01 keepalived]# cat check_httpd.sh 脚本需要有执行权限 通常情况下,利用keepalived做热备,其中一台设置为master,一台设置为ba ...

  4. javaweb学习笔记(三)

    一.javaweb高级(Filter和Listener)的简单介绍 1.过滤器Filter (https://www.cnblogs.com/vanl/p/5742501.html) ①定义 Filt ...

  5. HTTP文件上传

    看到网上很多链接文件(word.pdf...)可以下载,想制作http下载链接. 其实是将某文件直接放在服务器上搭建的网站上某目录下即可,例如:http://xxx:port/UpgradePack/ ...

  6. 洛谷 P4377 [USACO18OPEN]Talent Show + 分数规划

    分数规划 分数规划可以用来处理有关分数即比值的有关问题. 而分数规划一般不单独设题,而是用来和dp,图论,网络流等算法结合在一起. 而基础的做法一般是通过二分. 二分题目我们都知道,需要求什么的最小或 ...

  7. 元素在当前窗口可视的区域---Element.scrollIntoView()

    element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // ...

  8. C语言JSON序列化/反序列化

    最近想找一个C语言处理嵌套结构体和结构体数组的json库,理想的是能够很容易处理复杂结构体嵌套,并且使用简单的,但是没找到比较合适的,于是打算自己封装一个: 两个问题: C语言结构体本身没有元数据,这 ...

  9. 第06组 Alpha冲刺(1/6)

    队名:拾光组 组长博客链接 作业博客链接 团队项目情况 燃尽图(组内共享) 宋奕 过去两天完成了哪些任务 主要完成了用户模块接口 具体完成了用户注册登录,忘记.修改密码,修改.查看个人信息 GitHu ...

  10. Thingsboard Gateway开发环境

    源码下载地址:https://github.com/thingsboard/thingsboard-gateway 国内大神源码地址:https://github.com/guodaxia103/th ...