html5 －为移动设备添加 viewport

gaohongijj

2016-07-19

为移动设备添加 viewport

<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

user-scalable指令指定用户是否可以缩放视区，即缩放Web页面的视图。值为yes时允许用户进行缩放，值为no时不允许缩放。

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

maximum-scale和minimum-scale指令用于设置用户对Web页面缩放比例的限制。值的范围为0.25至10.0之间。与initial-scale相同，这些指令的值是应用于视区内容的缩放比例

gaohongijj

0 关注 0 粉丝 0 动态

相关推荐

[PDF] Rendering on Canvas

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

songfens 2020-07-05

jQuery Mobile 安装

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

tthappyer 2020-06-02

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

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

lengyu0 2020-05-20

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

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

qsdnet我想学编程 2019-12-19

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

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

wangjie 2019-12-01

移动端适配

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

王景迁 2019-11-19

html5开发之viewport使用

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

纯屌丝程序猿 2014-04-09

css面试题

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

LiybSunshine 2019-11-08

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

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

淡风wisdon大大 2019-11-04

html 适应手机

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

小笨要阳光 2015-01-20

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

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

scdn 2015-06-12

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

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

fengent 2018-10-19

html5中的自适应字体

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

loverlucky 2016-02-24

bootstrap的三大核心是什么

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

cscscssjsp 2019-07-12

Css-移动端适配总结

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

wcssdu 2019-07-01

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

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

ChinaGuanq 2019-07-01

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

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

oKeYue 2019-06-28

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

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

FruitHardCandy 2016-09-19

PHP ueditor 的代码高亮

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

我的程序员人生 2016-08-30

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

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

hhhkhhh 2016-07-29

gaohongijj

W3CSchool教程: HTML 教程; CSS 教程; Bootstrap 教程; Javascript 教程; jQuery 教程

后端教程: C 教程; Java 教程; PHP 教程; Python 教程; Go 教程

移动开发: Android 教程; Swift 教程; Kotlin 教程; jQuery Mobile 教程; ionic 教程

关于我们: 新闻动态; 联系方式; 招聘英才; 安科实验室; 帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号京公网安备11010802014868号