移动端 viewport

2024-09-03

移动端开发viewport深入理解（转）

一.viewport的概念移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,就是浏览器上用来显示网页的那部分区域,但viewport不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小. 在默认情况下,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewp

【转】移动端viewport的使用

web端网站转移至移动端页面,注意点如下: 1.首先引入viewport调整页面宽度 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 2.css中1px并不等于设备的1px 3.导图原文转自:http://www.cnblogs.com/2050/p/3877280.html http:/

移动端viewport解惑

我们在做移动端webapp的时候需要设置这么一段: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 再配合媒体查询@media就可以写出适配各种手机端的页面了.但是,为什么就能够了呢? 网上查了很多资料,反复看了很多遍还是似懂非,知道看了知乎中一个问题的解答,茅塞顿开. 自己不明白三个点,其

移动端Viewport & 使用rem来开发移动端网站

Viewport大神无双的精彩解释具体参数各型号是否支持参见: http://www.cnblogs.com/2050/p/3877280.html#commentform 摘录: 移动设备上的viewport: 设备的屏幕上能用来显示我们的网页的那一块区域设备像素比: docment.devicePixelRatio = 物理像素 / 独立像素在Retina屏的iphone上,devicePixelRatio的值为2,也就是说1个css像素相当于2个物理像素. 一些设备上浏览器的默认

移动端 viewport设置

移动端viewport模版

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name

[总结]CSS/CSS3常用样式与web移动端资源

CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE10以上不支持. 如果你安装了多个IE,条件注释将会以最高版本的IE为标准. 条件注释的基本结构和HTML的注释(<!– –>)是一样的.因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释

你可能不知道的viewport

概述前几天偶然看到一个pc端网页,发现用手机打开竟然同比缩放了,作为一个前端从业者,我自然想要弄清它到底是怎么缩放的.之后查了它的meta信息,css和js,发现没有任何兼容手机端的代码,那它到底是怎么缩放的呢?百思不得其解,最后无意中看别人说viewport的默认值是980px,才知道原来是viewport的锅. 于是我深入的复习了一下viewport相关知识,把心得记录下来,供以后开发时参考,相信对其他人也有用. 基础概念本来看了移动前端开发之viewport的深入理解,但是仍然有一些概

web前端之移动端：知识汇

移动前端自适应适配方法总结移动端前端适配方案(总结) -- 面试重点不要再问我移动适配的问题了一.响应式布局: // Extra small devices (portrait phones, less than 576px) // No media query for `xs` since this is the default in Bootstrap // Small devices (landscape phones, 576px and up) @media (min-width

web开发中移动端适配

这个话题有些复杂,说起来有些琐碎,因为和移动端适配相关的问题太多了. 1. 概念 1.1 设备像素设备像素被称为物理像素,它是显示设备中一个最小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮度.这些设备像素的微小距离欺骗了我们肉眼看到的图像效果. 1.2 屏幕密度(ppi) 屏幕密度是指一个设备表面上存在的像素数量,它通常以每1英寸上排列有多少像素来计算(ppi:Pixels Per Inch).苹果公司声称人类的肉眼无法区分单个像素,当一个显示器像素密度超过300ppi的时候,肉眼就

深入浅出 Viewport 设计原理

Viewport 是 HTML5 针对移动端开发新增的一个 meta 属性, 它的作用是为同一网页在不同设备的呈现,提供响应式解决方案.这篇文章尝试通过循序渐进的方式,逐层探索 Viewport 的设计原理,希望能给读者带来更加清晰.更加全面的技术认知. 一.引言在PC时代,我们用 css 设置 1px 边框,显示器会用1个物理像素进行渲染.而进入移动应用时代后,我们原来设置1px边框,在手机上可能需要用 2 个或 3 个物理像素来渲染. 那么,手机为什么要这么做?解决了什么问题?以及我们开发

理解设备像素、设备独立像素、css像素、viewport

设备像素也叫物理像素. 设备像素指的是显示器上的真实像素,每个像素的大小是屏幕固有的属性,屏幕出厂以后就不会改变了. 设备分辨率描述的就是这个显示器的宽和高分别是多少个设备像素. 设备像素和设备分辨率交给操作系统来管理,浏览器不知道.也不需要知道设备分辨率的大小,浏览器只需要知道逻辑分辨率就可以了. 早期的移动设备,只有物理像素,没有独立像素,在不缩放的前提下,CSS 中的 1px 就代表着 1 个物理像素.比如 iphone3 的物理像素是 320 * 480,那么 width: 320px;

CSS/CSS3常用样式小结

1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis; 2.设置溢出文本显示为省略标记: text-overflow:ellipsis; (注:text-overflow:clip | ellipsis | ellipsis-word;

3.基础点的移动web

1.移动端的屏幕适配在Web开发中可以使用px(像素).em.pt(点).in(英寸).cm(厘米)做为长度单位,我们最常用px(像素)做为长度单位. 我们可以将上述的几种长度单位划分成相对长度单位和绝对长度单位.英寸是一个绝对的长度单位,像素是一个相对的长度单位. window.devicePixelRatio ~= 物理像素/独立像素 / 获取屏幕的物理像素尺寸 window.screen.width; window.screen.height; 2.视口viewport: // 获取vi

移动Web开发小结

以下是做移动端Web开发过程中小结的几个事项:希望能够帮助到大家,同时也方便自己查看: 1,在移动开发页面中,主体盒子的max-width与min-width的设置原因: ①设置max-width是为了不让盒子无限放大,以至内容显示不清,界面不友好 ②设置min-width设置最小限制,以便于更好的布局 2,position:fixed; 这个属性是以window最外层容器计算 3,去除图片默认下边距的几种方法: ①在图片父容器中设置 font-size: 0; ②给图片设置 display:

h5 meta学习

定义针对搜索引擎的关键词:<meta name="keywords" content="meta,red" /> 定义对页面的描述:<meta name="description" content="这是meta教程" /> 定义页面的最新版本:<meta name="revised" content="bu, 2016/5/10/" /> 每 5 秒

经常使用meta标签属性

你不知道的meta标签

前言 meta标签可以用来做seo优化.指定移动端viewport的展现形式.设置http请求.告诉浏览器缓存静态资源的模式等等.今天整理一下使用meta标签实用的,常见的场景. meta标签的组成 meta标签的作用取决于我们为它定义的属性和属性值. name:把content属性连接到某个名称. content:定义与 http-equiv 或 name 属性相关的信息. http-equiv:把content属性关联到http头部. charset:定义文档的字符编码. 指定浏览器缓存模式

最齐全的站点元数据meta标签的含义和使用方法

最齐全的站点元数据meta标签的含义和使用方法随着HTML5的流行和Web技术的不断演变,Meta标签队伍也越来越壮大,从Windows XP的IE6到现在Windows 7.Windows 8的IE9.IE10.IE11,对Html5的支持越来越好.html meta标签的功能作用也越来越强大. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZnJlc2hsb3Zlcg==/font/5a6L5L2T/fontsize/400/fill/I0JBQ

HTML与CSS学习笔记(6)

1.flex弹性盒模型在父容器中添加display:flex;把父容器变为弹性盒模型作用(写)在flex容器上作用(写)在flex子项上 flex-direction order flex-wrap flex-grow flex-flow flex-shrink justify-content flex-basis align-items flex align-content align-self *快速写子类的方法: div.parent>div.box按下tab: <div clas

移动端 viewport

热门专题