HTML5学习

yaoliuwei 2015-02-02

1.<metaname="viewport"content="width=device-width,

user-scalable=yes,minimum-scale=1.0,maximum-scale=1.0"/>

width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

: yaoliuwei

相关推荐

[PDF] Rendering on Canvas

PDF.js 先创造canvas，再在上面渲染pdf的内容。创建一个size大于screen的canvas，其移动的触发事件是默认就有的么？// Keep the canvas hidden until the first draw callback, o

songfens 0喜欢 / 0评论 2020-07-05

jQuery Mobile 安装

CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。使用 jQuery 内核, 你不需要在电脑上安装任何东西; 你仅仅需要在你的

tthappyer 0喜欢 / 0评论 2020-06-02

没有最全只有更全的关闭浏览器缓存的<meta>标签

meta是html语言head区的一个辅助性标签。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。与initial-scale相同，这些指令的值是应用于视区内容的缩放比例。E、Window-target说明：强制页面在

lengyu0 0喜欢 / 0评论 2020-05-20

IT兄弟连 HTML5教程在移动设备上设置原始大小显示

在iPhone系列和iPod Touch中使用的是Safari浏览器，它支持前面介绍的媒体查询表达式。因为在iPhone中使用的Safari浏览器在进行页面显示时是将窗口的宽度作为980px进行显示的，因为很多网页是按照800px左右标准制作的，所以Saf

qsdnet我想学编程 0喜欢 / 0评论 2019-12-19

固定宽度布局开发WebApp如何实现多终端下自适应？

在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站。在css中我们一般使用px作为单位，在桌面浏览器中cs

wangjie 0喜欢 / 0评论 2019-12-01

移动端适配

所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。最初该技术是用于Moto Aura上。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏

王景迁 0喜欢 / 0评论 2019-11-19

html5开发之viewport使用

随着高端手机的盛行，移动互联应用开发也越来越受到人们的重视，用html5开发移动应用是最好的选择。然而，每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢？学习html5 viewport的使用能帮你做到这

纯屌丝程序猿 0喜欢 / 0评论 2014-04-09

css面试题

css垂直居中的方法有哪些？已知高度的块级子元素，采用绝对定位和负边距.container { position: relative;}.vertical { height: 300px; /子元素高度/ position: absolute;

LiybSunshine 0喜欢 / 0评论 2019-11-08

移动端视口和像素比基础问题整理

分辨率是屏幕呈像的最小单位。一个css像素到底占据多少个物理像素和谁有关？布局视口的出现，在极大程度上帮助了桌面网站到移动设备上的转移。在pc端，单独一个width为20%的元素最终拿到的值要根据初始包含块的width来决定，因为我们横。visual vi

淡风wisdon大大 0喜欢 / 0评论 2019-11-04

html 适应手机

在用HTML5开发手机应用或手机网页时，head部分总会有如下一段代码，这段代码到底什么意思呢。在网上，大家会得到很多答案。我从网上搜集了部分介绍，整理一下，以留备用。width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值

小笨要阳光 0喜欢 / 0评论 2015-01-20

HTML5开发之meta标签的viewport使用说明

target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]. 控制 viewport 的大小，可以指定一个值或者特殊的值，如 device-width 为设备

scdn 0喜欢 / 0评论 2015-06-12

vue移动端html5页面根据屏幕适配的四种解决方法

最近做了两个关于h5页面对接公众号的项目，不得不提打开微信浏览器内置地图导航的功能确实有点恶心。下次想起来了的话，进行总结分享一下如何处理。在vue移动端h5页面当中，其中适配是经常会遇到的问题，这块主要有死个方法可以适用。具体引入和使用方法，移步gith

fengent 0喜欢 / 0评论 2018-10-19

html5中的自适应字体

在进行移动端页面的开发的时候，屏幕适配是很大的难题。在某些时候也会遇到字体的适配的问题。方案二：使用viewport来实现，css3提供了vw，vh，vim等与viewport相关的单位。案例如下：box2中的字体大小会根据屏幕的大小实时缩放。#box {

loverlucky 0喜欢 / 0评论 2016-02-24

bootstrap的三大核心是什么

Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。虽然可以直接使用 Bootstrap 提供的 CSS 样式表，不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和

cscscssjsp 0喜欢 / 0评论 2019-07-12

Css-移动端适配总结

前言工作以后，大部分的业务工作都是基于移动端H5的，开发过程中学习了很多东西，遇到过许多问题，诸如rememcss pxdevice px等，本文纯属个人的归纳总结，如有问题，请指出亲喷~PC端本文主要是讲解移动端的响应式布局，但是在真正进入之前，先了

wcssdu 0喜欢 / 0评论 2019-07-01

「前端早读君010」重学前端day1: HTML基础

前言鉴于平时业务代码写多了，笔者对前端的一些基础知识都开始生疏。有鉴于此，加上又到了一年一度的春招时间，在接下来的一段时间内笔者将对整个前端体系的知识进行一些梳理，同时会附带上相关基础知识中常见的面试题。在笔者复习的同时也希望能给准备春招的前端同学们提供一

ChinaGuanq 0喜欢 / 0评论 2019-07-01

create-react-app+react-app-rewired搭建viewport解决方案

vw解决方案早有耳闻，我也很想上手尝试一下，所以想要自己上手配置一个CRA脚手架的解决方案。在自己动手之前也先查了一些资料，其中Ghan的这篇博客很有帮助：使用create-react-app脚手架搭建vw-layout解决方案。和Ghan的方案不同，我研

oKeYue 0喜欢 / 0评论 2019-06-28

浅谈一下前端移动端页面开发中的页面布局

简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport。如今的浏览器，都会给

FruitHardCandy 0喜欢 / 0评论 2016-09-19

PHP ueditor 的代码高亮

input, select, textarea{ font-family:\5FAE\8F6F\96C5\9ED1,'Arial'; background-color:#fff margin:0; padding:0; ou

我的程序员人生 0喜欢 / 0评论 2016-08-30

HTML5: 两个viewport的故事（第一部分）

在这个迷你系列的文章里边我将会解释viewport，以及许多重要元素的宽度是如何工作的，比如<html>元素，也包括窗口和屏幕。这篇文章是关于桌面浏览器的，其唯一的目的就是为移动浏览器中相似的讨论做个铺垫。形式上，元素仍然是128个CSS像素

hhhkhhh 0喜欢 / 0评论 2016-07-29

HTML5: 两个viewport的故事（第二部分）

在这个迷你系列的文章里边我将会解释viewport，以及许多重要元素的宽度是如何工作的，比如<html>元素，也包括窗口和屏幕。这篇文章我们来聊聊关于移动浏览器的内容。移动浏览器的问题当我们比较移动浏览器和桌面浏览器的时候，它们最显而易见的不同

zhaosnow 0喜欢 / 0评论 2016-07-28

移动前端开发之viewport的深入理解

移动前端开发之viewport的深入理解在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨

qianxiaona 0喜欢 / 0评论 2016-07-20

html5 －为移动设备添加 viewport

值为yes时允许用户进行缩放，值为no时不允许缩放。initial-scale指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面，设为1.0则将显示未经缩放的Web文档

gaohongijj 0喜欢 / 0评论 2016-07-19

自适应网页设计的方法

昨天中午Google进行了一次在线讲座，讲述自适应网页设计的概念和方法，维护同一个网页代码，即可使网站在多种浏览设备上具有更好的阅读体验，这里我将该讲座内容简要的整理一下。　　1、在HTML头部增加viewport标签。　　在网站HTML文件的开头，增加v

homesmile 0喜欢 / 0评论 2016-04-11

html自动适应手机和pc

"自适应网页设计"到底是怎么做到的？首先，在网页代码的头部，加入一行viewport元标签。viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度，原始缩放比例为1.0，即网页初始大小占屏幕面积的100%

wangnan0 0喜欢 / 0评论 2015-12-06

理解SVG的viewport，viewBox，preserveAspectRatio

一个svg，设置了viewBox之后，viewBox的长宽值如果都小于svg的viewport的长宽值，那么结果一定是放大；但是viewBox的长宽值一旦有一个值大于vewport之后，最后的实际效果就不是放大，而是缩小了。因为viewBox的目的是要自己

Mofier 0喜欢 / 0评论 2015-06-28

手机web——自适应网页设计（html/css控制）

"自适应网页设计"到底是怎么做到的？首先，在网页代码的头部，加入一行viewport元标签。viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度，原始缩放比例为1.0，即网页初始大小占屏幕面积的100%

shmilyILY 0喜欢 / 0评论 2015-05-29

手机版网页设计html5元素meta name=”viewport”设置需要注意的地方

越来越多的网页开始针对手机浏览，自适应屏幕大小了，css的设置方法请参见前面的文章：用CSS3的@media属性根据屏幕大小做自适应各种分辨率网页显示版本-media_query详解，在这篇文章里面我们详细解读一下，html5属性里面 meta name=

燃烧的梦 0喜欢 / 0评论 2015-05-02

【移动端web开发】（二）深入viewport

前言通过上一篇我们已经大概明白viewport是什么，但是viewport并没有那么简单，一包研究得身心疲惫，脑子一个不够用哈哈吧！注意，visual viewport尺寸所对应的并不是指屏幕区域里的物理像素，而是CSS 像素。同理,css的1px的值并没

王景迁 0喜欢 / 0评论 2019-06-27

使用SVG画图（基本使用 + 贝塞尔曲线等一些重要画图方法）

一基本概念1.1 画板viewport你把SVG看成一个普通的标签，viewport就是代表这个标签的实际大小。</svg>3.3 光滑到所谓光滑的贝塞尔曲线，就是一个在之前画贝塞尔曲线停下的地方按照对应的规则矩形画贝塞尔曲线，下面方便说明

zwblcz 0喜欢 / 0评论 2019-06-27

viewport的作用

HTML5开发手机应用--viewport的作用在用HTML5开发手机应用或手机网页时，<head>部分总会有如下一段代码，这段代码到底什么意思呢。在网上，大家会得到很多答案。我从网上搜集了部分介绍，整理一下，以留备用。移动版的 Safari

梦远青城 0喜欢 / 0评论 2014-12-09

css3媒体查询

设置meta标签<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=

切慕溪水 0喜欢 / 0评论 2019-06-27

茴字的四种写法—移动适配方案的进化

话说我刚工作的时候，就开始用rem了，过了没多久，接触到了flexible，系统化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一站式的文章，可以系统的了解前端适配的演进。闲话少叙，马上开始。

Miryou 0喜欢 / 0评论 2019-06-27

响应式网页设计入门

响应式网页设计这个概念在2000年的时候就有人提出来了，其实我更喜欢将其翻译为自适应网页设计，阮一峰关于Responsive Web Design的一篇文章就是翻译为自适应网页设计，但是国内都采用了响应式网页设计这一生硬的翻译（你能第一次看到响应式网页设计

homesmile 0喜欢 / 0评论 2014-09-11

微信wap开发---页面自适应大小

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.3, maximum-scale=2.0, us

wsjb00 0喜欢 / 0评论 2014-05-30

SVG相关学习(一)SVG基础

<rect x="10" y="10" width="600" height="200" stroke="url" stroke-width=&quo

mozhi00 0喜欢 / 0评论 2019-06-26

禁止web页面在手机上缩放（html5）

允许屏幕缩放的设置，

帅的相对论 0喜欢 / 0评论 2014-04-14

前端知识点总结—-响应式

前端知识点总结—-响应式1.Responsive Web Page:响应式网页/自适应的网页2010年提出,一个网页，会自动根据用户浏览设备不同，自动必变布局,可以被PC/PAD/PHONE 正常浏览2:响应式网页必备流式布局

jianqi 0喜欢 / 0评论 2019-06-26

《SVG精髓》笔记（一）

本文是基于《SVG精髓》一书的简单总结，文中的demo均为该书提供，目的是方便大家使用时快速查阅。viewBox：允许指定一个给定的一组图形伸展以适应特定的容器元素。这个属性值由4个数值组成，viewBox =<min-x><min-y&

Irelia 0喜欢 / 0评论 2019-06-26

Android手机上关于viewport的理解

一．Android默认的viewport在网页未加载完成时，值为320，一旦页面加载完成，该值会发生改变，android_2.x的值为800，android_4.x的值为980，用以适配一般的web网页。二．Android的手机分辨率的获取使用window

Alexlee 0喜欢 / 0评论 2013-08-18

网页页面的自适应

"自适应网页设计"到底是怎么做到的？首先，在网页代码的头部，加入一行viewport元标签。由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。七.图片的自适应除了布局和文本，"自适应网页

张大晴 0喜欢 / 0评论 2013-08-01

HTML中的meta的属性作用

charsetcharset 属性规定 HTML 文档的字符编码；html中必带属性；name属性；name属性主要用于描述网页，属性值为content，content中的内容常用在SEO中。<meta name="参数"cont

勤能补拙孰能生巧 0喜欢 / 0评论 2019-06-25

移动端webapp开发必备知识

移动设备的用户越来越多，每天android手机的激活量都已经超过130万台，所以我们面向移动终端的WebAPP也开始跟进了。本文主要介绍webapp的开发与调试的相关知识和经验，以及给出几种可选的解决方案。device pixels：显示屏幕的的最小物理

缘来如此 0喜欢 / 0评论 2013-05-14

关于dgrid的pagination组件的问题

height: 2em; /* force consistent heights across columnset cells */. <div id="dgrid"></div> 对于dgrid的Paginat

葉無聞 0喜欢 / 0评论 2013-02-05

移动平台前端开发要点（二）

对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;其实很简单，就一个meta，形如：。iphone

jjjjjj 0喜欢 / 0评论 2013-01-16

5个viewport相关的jQuery插件

在web和网站开发中我们常常需要处理viewport相关的功能，在前面的文章中我们曾经介绍过 javascript响应式视图切换工具类库，今天这里我们再介绍5个和viewport相关的jQuery插件，希望大家喜欢！Viewport Selector

momode 0喜欢 / 0评论 2012-11-16

分享5个viewport相关的jQuery插件

在web和网站开发中我们常常需要处理viewport相关的功能，在前面的文章中我们曾经介绍过javascript响应式视图切换工具类库，今天这里我们再介绍5个和viewport相关的jQuery插件，希望大家喜欢！Viewport Selectors fo

崔博伦一路有你 0喜欢 / 0评论 2012-11-16

微信小程序新单位rpx与自适应布局

rpx是微信小程序新推出的一个单位，按官方的定义，rpx可以根据屏幕宽度进行自适应，在rpx出现之前，web页面的自适应布局已经有了多种解决方案，为什么微信还捣鼓出新的rpx单位？在解释这个单位前，我们先简单了解一下目前的主流的自适应布局解决方案：。通过r

badroot 0喜欢 / 0评论 2019-06-20

【简报】超棒的javascript响应式视图（viewport）切换工具类库

ReView是一个动态的viewport系统，能够帮助你设计更灵活的响应式视图选择方式，可能大家有的时候不希望网站布局在不同的设备上的显示不同的布局结构，这个时候viewport就可以派上用场了。Review 是一个纯javascript实现的类库，针对每

JavaJspSsh 0喜欢 / 0评论 2012-10-08