YaoDeBiAn
YaoDeBiAn

理解设备像素比

移动端的设备多种多样，不同的设备又有不同的分辨率，低一点的有 800 * 400，中等的有 1280 * 720，高的有 1920 * 1080，甚至还有更高的 4k 屏等。
我们在开发移动端页面时，将视口（viewport）设置为设备宽度（device-width）后，同一份页面在这些不同的设备上又怎样的表现呢？我们写一个测试页面，在 Chrome 中看看就知道了。

同一份页面在不同设备上的表现

测试页面的代码如下：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        div{
            width: 300px;
            height: 300px;
            background:red;
        }
    style>
head>
<body>
    <div>div>
body>
html>

1.PC 浏览器下的表现
PC 浏览器中的表现如下：

理解设备像素比_第1张图片
                     1-chrome.png

2.IPhone6 下的表现
IPhone6 下的表现如下：

理解设备像素比_第2张图片
                     2-iphone6.png

3.Galaxy S5 下的表现：
Galaxy S5 下的表现如下：

理解设备像素比_第3张图片
                         3-galaxy-s5.png

可见，虽然设备不一样，但同样一个元素，在这些设备上宽度都是一样的。
我们来看一下这些测试设备的分辨率：
  • Chrome（也就是我们的 PC 屏幕）：1920*1080
  • IPhone6：1334*750
  • Galaxy S5：1280*720

为什么这些设备拥有不同的分辨率，而在渲染页面时表现都一样呢？其实这是由设备像素比造成的。
设备像素比是怎么发挥作用的呢？要理解这个问题，需要三块预备知识：

  • 设备独立像素
  • DPI/PPI
  • CSS 中的像素

下面依次来看一下这些内容。

设备独立像素

设备的独立像素是和设备的分辨率相关联的，比如 IPhone6 的分辨率为 1334 * 750，那么表示该手机的屏幕上有 1366 * 750 个物理像素，而 Galaxy S5 的屏幕上有 1280*720 个像素。

PPI/DPI

PPI/DPI 是像素密集度，表示屏幕每英寸拥有的像素个数，PPI/DPI 的计算方式如下（以 IPhone6 为例）：



     image.png

最终计算出的 IPhone6 的 PPI 为：325.16。该结果表示在 IPhone6 上，每英寸有 325.16 个物理像素，四舍五入为 325 个物理像素。
可以发现：这个 PPI 的值近似等于 IPhone6 这个设备的水平物理像素的一半，也即：

750 / 325 = 2

这个由设备水平物理像素和设备 PPI/DPI 计算出来出来的比值就是设备像素比。

CSS 中的像素

CSS 中的像素是一个相对值，不是绝对值，因此1px 的 CSS 像素并不一定等于 1px 的物理像素。
需要注意的是，CSS 中的像素单位是抽象的，只是一种规范，最终的显示是取决于物理设备的。物理设备根据某种规则，决定该采用几个物理像素去显示 1px 的 CSS 像素，这个规则就是设备像素比。

设备像素比

前面已经说到过，设备像素比等于设备的水平物理像素和设备 PPI 的比值。设备像素比的意义就是决定了用多少个物理像素去显示 1px 的 CSS 像素。比如在 IPhone6 中，设备像素比为 2，那么在 IPhone6 上就会使用 2*2 = 4 个物理像素去显示 1px 的 CSS 像素。
因此，如果我们给一个 DIV 元素设置 300px * 300px 的样式，那么其在 IPhone6 上将会占用 600 * 600 个物理像素。这就是为什么明明 IPhone6 的分辨率为 1334 * 750（物理像素），而将 DIV 元素的宽度设置成 300px 后，其几乎占满了水平屏幕的原因。
上例在 IPhone 中的渲染效果也可以理解为：在分辨率为 667 * 325（设备宽度不变），设备像素比为 1 的设备上显示 300px 宽度的 DIV 的效果。既然设备像素比为 1，那么也可以这么理解：上例在 IPhone6 中的显示效果相当于在 667 * 325 的 Chrome 浏览器下的显示效果。
Galaxy S5 的设备像素比为 3，因此在 Galaxy S5 中的显示效果可以理解为在 660 * 360 的 Chrome 浏览器下的显示效果。
这也解释了为什么不同分辨率的设备，对于 300px 宽度的 DIV 展示效果基本一致的情况。

window.devicePixelRatio

window 对象有个 devicePixelRatio 属性，其中也保存了设备像素比的值，因此我们不必经过上面的公式计算，就可以直接获取到设备像素比的值。
注意：你可以为这个 window.devicePixelRatio 重新赋值，但并不会对最终的显示造成任何的影响。

window.devicePixelRatio = 10
window.devicePixelRatio // 10

上面重新设置了 window.devicePixelRatio 的值，但不会影响浏览器的显示效果，也就是说，手动设置 window.devicePixelRatio 是没有任何用处的。

总结

本文总结了设备像素比的相关概念，先从同一份页面在不同分辨率的设备上表现一致的现象说起，引入了设备独立像素、PPI/DIP、CSS 中的像素和设备像素比的概念。
我们需要记住一点：1px 的 CSS 像素并不一定等于 1px 的物理像素，不同的设备会根据其对应设备像素比决定使用多少个物理像素显示 1px 的 CSS 像素。
另外，在移动端不建议使用 px 作为布局单位，而是应该使用 rem 或者百分比作为布局单位。

完。



作者：黑黢黢
链接：https://www.jianshu.com/p/c88e9489b583
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

你可能感兴趣的:(css笔记)

  • CSS笔记（九） 盒子模型---------清除浮动 Favour72 csscss3web前端大前端
    前言我们前面学到的浮动元素有一个标准流的父元素，他们有一个共同点特点，都是有高度的但是，所有的父盒子都必须给高度吗最好的选择是不是让子盒子撑开父盒子，有多少子盒子就能撑开父盒子但是呢，由于在网页中父盒子在很多情况下没有给高度，子盒子float浮动了又不占有位置，那么没有盒子撑开父盒子了，父盒子的高度就会为0,也就是我们说过的父元素坍塌一、清除浮动是什么？清除浮动的本质就是清除浮动元素脱离标准流造成
  • CSS笔记 陈两全 css笔记前端
    8.201.层级具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。注意：如果两个定位元素重叠，没有指定z-index，最后定位在HTML代码中的元素将被显示在最前面。有三个特征：1.元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素2.z-index属性指定了⼀个元素的堆叠顺序（哪个元素应该放在前面，或后面）3.⼀个元素可以有正数或负数的堆叠顺序2.透明度透明度有两种表示方法，分别是：1
  • CSS笔记 陈两全 css笔记前端
    8.131.列表样式列表样式是指写在li标签上面的样式控制，他有三个属性和一个综合属性，分别是1.list-style-type2.list-style-position3.list-style-image4.list-style（综合属性）1.1.list-style-typelist-style-type有五个属性值，分别是1.默认值:disc（实心圆）2.circle（空心圆）3.squar
  • CSS笔记(二) - 页面布局 盒子模型 且.为.乐 #CSScsshtmlcss3
    文章目录1元素显示模式1.1块元素1.2行内元素1.3行内块元素1.4转换1.5总结2.盒子模型2.1页面布局2.2盒子模型（BoxModel）组成2.3边框2.3.1概念2.3.2表格的细线边框2.3.3边框对盒子模型的影响2.4内边距padding2.4.1概念2.4.2内边距和盒子大小的关系2.4外边距margin2.4.1外边距典型应用-块级元素水平居中2.5外边距合并2.5.1嵌套块元素
  • CSS必看知识整理 24e2785df9d3
    学前端的一点css笔记，参考的是黑马程序员pink老师的教程。一.行内元素1.一行可以显示多个2.宽度核高度默认由内容撑开3.不可以设置宽高代表标签：a、span、b、ui、s、strong、ins、em、del二、行内块元素1.一行可以显示多个2.可以设置宽高代表标签：input、textarea（文本框）、button、select三、元素显示模式转换display:block转换成块级元素d
  • 【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景（Day 2） 进击的文文文 webcss前端css3
    来源：黑马程序员pink老师前端入门教程目录I.Emmet语法①快速生成HTML结构语法②快速生成CSS样式语法③快速格式化代码II.复合选择器①后代选择器※②子选择器※③并集选择器※④伪类选择器❀链接❀focus⑤总结III.元素显示模式①块元素②行内元素③行内块元素④总结⑤显示模式的转换⑥snipaste的使用⑦单行文字垂直居中IV.背景总结①背景颜色bgc❀半透明②背景图片bgi③背景平铺b
  • 前端html+css笔记 stoAir 前端htmlcss
    前端Html:html标签加粗--文本格式化标签倾斜下划线删除src用于指定图像的位置名称(属性名+属性值=属性)alt替换文本title提示文本width图片宽度链接（段落内空格+target="_blank"跳转新窗口音频loop循环播放autoplay自动播放（禁用controls显示音频面板视频muted静音播放同（7）9.列表无序列表：有序列表：定义列表：（一个标题对应多个内容10.表格
  • 初学css笔记 描绘已经在学了 css
    部分笔记！！持续更新css时写在style标签里，style标签在head标签里，title标签下。基本结构：选择器（标签名字）{css的属性}html是卸载body里面的--------------------------------------------------------------------------------------------------------scc常见属性col
  • CSS笔记IV saddhu. css笔记前端css3
    定位作用：灵活的改变盒子在网页中的位置相对定位定位模式：position：relativeleft、right、top、bottom特点：改变位置的参照物是自己原来的位置不脱标，而且占位标签显示模式表改变绝对定位定位模式：position：absolute使用场景：(子绝父相)子级绝对定位，父级相对定位为子级设置绝对定位，为父级设置相对定位特点：脱标，不占位与相对定位恰恰相反参照物是先找最近已经定
  • CSS笔记III saddhu. web前端css前端css3html5web
    选择器结构伪类选择器作用：根据元素的结构关系查找元素选择器说明E:first-child查找第一个E元素E:last-child查找最后一个E元素E:nth-child(N)查找第N个E元素(第一个元素N值为1)nth-child(公式)作用是可以根据元素的结构关系查找多个元素偶数标签：2n；奇数2n+1or2n-1之类的依次类推找到第五个以后的所有标签n+5；第五个以前的所有标签是-n+5伪元素
  • CSS笔记II saddhu. web前端css笔记前端css3web
    CSS第二天笔记复合选择器后代选择器子选择器并集选择器交集选择器伪类选择器三大特性继承性层叠性优先级优先级-叠加计算规则Emmet写法背景属性背景图平铺方式位置缩放固定复合属性显示模式转换显示模式复合选择器定义：由两个或多个基础选择器，通过不同的方式组合而成作用：更准确更加高效的选择目标元素(标签)后代选择器说明:选择某元素的后代元素抽象理解：儿子孙子都要选择格式父选择器、子选择器{CSS属性}，
  • CSS笔记 saddhu. web前端css笔记前端html5web3
    css第一天笔记CSS引入方式选择器标签选择器类选择器id选择器通配符选择器盒子属性文字控制属性大小粗细倾斜行高字体族字体复合属性文本缩进文本对齐修饰线颜色调试工具CSS引入方式有三种内部样式、外部样式、行内样式内部样式表：css样式写在style标签中(选中p标签)p{color:blue}外部样式表：作为开发使用1.写在单独的css文件中(my.css)例如将p标签变成红色p{color:re
  • 【狂神css笔记】CSS介绍&&选择器 暮色_年华 JavaScriptcsscss3前端
    css是什么CascadingStyleSheet：层叠级样式表CSS：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动......css优势：1、内容和表现分离2、网页结构表现统一，可以实现复用3、样式十分丰富4、建议使用独立于html的css文件5、利用SEO，容易被搜索引擎收录CSS快速入门选择器{声明1;声明2;}每一个语句以分号结尾css与html分离：在htm
  • html&css Jones_aj 前端
    HTML&CSS笔记总结标签语义化网页最大标题只能写一个提高网页的排名写在log下面h2-h6内容标题可以随便多写从大到小的写容器可以装任何东西包裹一段文字包裹重要文字引入图片属性src图片地址alt图片描述图片未引用成功时显示在页面ali中描述内容title当鼠标移到到标签时显示内容在哪里引入图片就在哪里开始找相对路径./同级文件/打开文件夹…/打开上一级对话列表dldt标题dd内容列表无序列表
  • html&css笔记完整版 NoN小旻 前端html&css自学htmlcss
    把1,2合在一起了，方便查看教程指路：这里目录1.导入京东界面练习（p102-114）设置网站图标（用在标题栏和收藏栏）2.vscode使用3.html实体meta标签：语义化标签块元素和行内元素列表超链接路径：图片标签内联框架音视频表格table表单formCSS设置样式：语法：选择器：单个选择器：复合选择器：父子兄弟选择器：属性选择器伪类选择器：否定伪类：超链接伪类：伪元素选择器：权重继承单位
  • 04.尚硅谷css笔记 xjt_0901 前端css
    css学习资料尚硅谷css3：https://www.bilibili.com/video/BV1XJ411X7UdMDN:https://developer.mozilla.org/zh-CN/CSS3参考手册：http://caibaojian.com/选择器游戏：http://flukeout.github.io/#HTML转义字符在HTML中有些时候，我们不能直接书写一些特殊符号比如：多个
  • "" target="_blank">学习css笔记——儿子选择器">" 巨汉子
    这个故事发生在某天，到华南植物园周边喝完早茶回公司，上网收集有趣的文字，整理修订多年前写好的《JavaScript》教程，并创作汉语SEO要用的《CSS语言》教程，存起来以后当文化传播作品使用。一边整理《JavaScript》教程,一边在网上和女粉丝侃大山，突然间，一个说自已是从海南万宁来广州学现代汉语的女粉丝问：“陈老师，最近文化传播教程又打算教点什么新东西？”，我问：“你们都想学啥？”，女粉丝
  • 2019-12-05 旧城丶恒书
    Version:1.0StartHTML:000000193EndHTML:000448737StartFragment:000425527EndFragment:000448639StartSelection:000425527EndSelection:000448639SourceURL:https://www.jianshu.com/writer·Css笔记Css的作用：[if!suppor
  • CSS笔记 且.为.乐 #CSScss学习css3
    文章目录1.图片1.1body下放图片2.文字2.1文字格式2.2Fonts字体属性2.2.1字体系列-fontfamily2.2.2字体大小-fontsize2.2.3字体粗细-font-weight2.2.4字体风格-font-style2.2.5字体复合属性3.盒子某些属性3.1圆角边框3.2盒子阴影3.3文字阴影4.table表单1.图片1.1body下放图片body下放图片body{ba
  • 学习CSS笔记——清除浮动clear 巨汉子
    这个故事发生在某天，到华南植物园周边喝完早茶回公司，上网收集有趣的文字，整理修订多年前写好的《JavaScript》教程，并创作汉语SEO要用的《CSS语言》教程，存起来以后当文化传播作品使用。一边整理《JavaScript》教程,一边在网上和女粉丝侃大山，突然间，一个说自已是从辽宁铁岭来广州学现代汉语的女粉丝问：“陈老师，最近文化传播教程又打算教点什么新东西？”，我问：“你们都想学啥？”，女粉丝
  • Web之HTML笔记 qq742234984 前端htmlpythonxml开发语言
    Web之HTML、CSS、JSWeb标准一、HTML（超文本标记语言）HTML基本结构标签常用标签1.font标签2.p标签3.注释4.h系列标题5.img6.超链接a7.列表8.表格9.表单Web之CSS笔记Web标准结构标准用于对网页元素进行整理和分类(HTML)表现标准用于设置网页元素的版式、颜色、大小等外观属性(CSS)行为标准用于对网页模型的定义及交互的编写(JavaScript)一、H
  • Web之CSS笔记 qq742234984 前端css笔记
    Web之HTML、CSS、JS二、CSS（CascadingStyleSheets层叠样式表）CSS与HTML的结合方式CSS选择器CSS基本属性CSS伪类DIVCSS轮廓CSS边框盒子模型CSS定位Web之HTML笔记二、CSS（CascadingStyleSheets层叠样式表）Css是种格式化网页的标准方式，用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的
  • css笔记 花与37 CSScsshtmlhtml5
    1、文字超出部分显示省略号单行文本的溢出显示省略号（一定要有宽度）p{width:200rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}多行文本溢出显示省略号p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hi
  • CSS笔记 洛千陨 前端学习笔记css笔记前端
    前端学习笔记专栏区别于官网中全面的知识讲解，主要记录学习技术栈时对于重点内容的提炼，便于对技术栈知识的快速回顾以及使用1.各类主要选择器常规选择器p：元素选择器.class：类选择器#id：id选择器input[type="text"]：属性选择器divp：后代选择器常用选择器父级是div元素的p元素：div>pdiv元素之后的第一个p元素（兄弟元素）：div+pp元素之后的每一个ul元素：p~u
  • Html Css笔记 weixin_30885111 人工智能javascriptViewUI
    鼠标交点:outline：none；透明:opacity透明0-1的小数元素透明它里边所有的内容都会变成透明的黑客:在结尾加如：\0IE11至IE8的IE浏览器\9\0IE10至IE8的IE浏览器\9IE10及IE10之前的IE浏览器在开头加入：*,+IE7及IE7之前的IE浏览器支持_IE6及IE6之前的IE浏览器支持注释！！！！！！！！！！！！！！！！！！！这是IE9876其他IE条件判断语句
  • CSS读书笔记 湾区人工智能 tensorflow人工智能python
    CSS笔记深圳，2023.10.26，Jack，常识：CSS(CascadingStyleSheets，层叠样式表），是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，CSS文件扩展名为.css。样式通常保存在外部的.css文件中。我们只需要编辑一个简单的CSS文档就可以改变所有页面的布局和外观。CSS注释以/*开始,以*/结束/*这是个注释*/CSS
  • CSS笔记[狂神版] 究极暴龙兽(Java版) css前端css3
    1、CSS如何学习1.css是什么2.css怎么用（快速入门）3.css选择器（重点+难点）4.美化网页（文字，阴影，超链接，列表，渐变）5.盒子模型6.浮动7.定位8.网页动画（特效效果）1.1、什么是CSSCascadingStyleSheet层叠级联样式表CSS：表现（美化网页）1.2、发展史css1.0css2.0DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得很简单，SEO
  • 狂神说-CSS笔记 幕雨123 前端javacss3
    文章目录1.什么是css1.1、什么是css1.2、发展史1.3、快速入门1.4、css的三种导入方式2、选择器2.1、基本选择器2.2、层次选择器2.3、结构伪类选择器2.4、属性选择器（常用）3、美化网页元素3.1、为什么要美化网页3.2、字体样式3.3、文本样式3.4、阴影3.5、超链接伪类3.6、列表3.7、背景3.8、渐变4、盒子模型4.1、什么是盒子模型4.2、边框4.3、外边距4.4
  • 狂神CSS笔记 YANKUOP #Java学习css前端css3
    文章目录1、什么是CSS1.1、什么是CSS1.2、发展史1.3、快速入门1.4、CSS的3种导入方式2、选择器2.1、基本选择器2.2、层次选择器2.3、结构伪类选择器2.4、属性选择器（常用）3、美化网页元素3.1、为什么要美化网页3.2、字体样式3.3、文本样式3.4、阴影3.5、超链接伪类3.6、列表3.7、背景3.8、渐变4、盒子模型4.1、什么是盒子模型4.2、边框4.3、内外边距4.
  • CSS笔记-狂神 阿汤哥的程序之路 前端css
    1、什么是CSS如何学习CSS是什么CSS怎么用（快速入门）CSS选择器（重点+难点）美化网页（文字，阴影，超链接，列表，渐变…）盒子模型浮动定位网页动画（特效效果）1.1、什么是CSSCascadingStyleSheet层叠样式表CSS：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动1.2、发展史CSS1.0CSS2.0：DIV（块）+CSS，HTML与CSS结构分
  • LeetCode[Math] - #66 Plus One Cwind javaLeetCode题解AlgorithmMath
    原题链接：#66 Plus One   要求： 给定一个用数字数组表示的非负整数，如num1 = {1, 2, 3, 9}, num2 = {9, 9}等，给这个数加上1。 注意： 1. 数字的较高位存在数组的头上，即num1表示数字1239 2. 每一位（数组中的每个元素）的取值范围为0~9   难度：简单   分析： 题目比较简单，只须从数组
  • JQuery中$.ajax()方法参数详解 AILIKES JavaScriptjsonpjqueryAjaxjson
    url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和    delete也可以使用，但仅部分浏览器支持。 timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局
  • JConsole & JVisualVM远程监视Webphere服务器JVM Kai_Ge JVisualVMJConsoleWebphere
        JConsole是JDK里自带的一个工具，可以监测Java程序运行时所有对象的申请、释放等动作，将内存管理的所有信息进行统计、分析、可视化。我们可以根据这些信息判断程序是否有内存泄漏问题。 　　使用JConsole工具来分析WAS的JVM问题，需要进行相关的配置。 　　首先我们看WAS服务器端的配置. 　　1、登录was控制台https://10.4.119.18
  • 自定义annotation 120153216 annotation
    Java annotation 自定义注释@interface的用法 一、什么是注释      说起注释，得先提一提什么是元数据(metadata)。所谓元数据就是数据的数据。也就是说，元数据是描述数据的。就象数据表中的字段一样，每个字段描述了这个字段下的数据的含义。而J2SE5.0中提供的注释就是java源代码的元数据，也就是说注释是描述java源
  • CentOS 5/6.X 使用 EPEL YUM源 2002wmj centos
    CentOS 6.X 安装使用EPEL YUM源1. 查看操作系统版本[root@node1 ~]# uname -a Linux node1.test.com 2.6.32-358.el6.x86_64 #1 SMP Fri Feb 22 00:31:26 UTC 2013 x86_64 x86_64 x86_64 GNU/Linux [root@node1 ~]#
  • 在SQLSERVER中查找缺失和无用的索引SQL 357029540 SQL Server
    --缺失的索引 SELECT  avg_total_user_cost * avg_user_impact * ( user_scans + user_seeks ) AS PossibleImprovement ,          last_user_seek ,    
  • Spring3 MVC 笔记（二） —json+rest优化 7454103 Spring3 MVC
    接上次的 spring mvc 注解的一些详细信息！                          其实也是一些个人的学习笔记  呵呵！
  • 替换“\”的时候报错Unexpected internal error near index 1 \ ^ adminjun java“\替换”
    发现还是有些东西没有刻子脑子里,,过段时间就没什么概念了,所以贴出来...以免再忘...   在拆分字符串时遇到通过 \ 来拆分，可是用所以想通过转义 \\ 来拆分的时候会报异常   public class Main {          /*
  • POJ 1035 Spell checker(哈希表) aijuans 暴力求解--哈希表
    /* 题意：输入字典，然后输入单词，判断字典中是否出现过该单词，或者是否进行删除、添加、替换操作，如果是，则输出对应的字典中的单词 要求按照输入时候的排名输出 题解：建立两个哈希表。一个存储字典和输入字典中单词的排名，一个进行最后输出的判重 */ #include <iostream> //#define using namespace std; const int HASH =
  • 通过原型实现javascript Array的去重、最大值和最小值 ayaoxinchao JavaScriptarrayprototype
    用原型函数（prototype）可以定义一些很方便的自定义函数，实现各种自定义功能。本次主要是实现了Array的去重、获取最大值和最小值。 实现代码如下：   <script type="text/javascript"> Array.prototype.unique = function() { var a = {}; var le
  • UIWebView实现https双向认证请求 bewithme UIWebViewhttpsObjective-C
              什么是HTTPS双向认证我已在先前的博文 ASIHTTPRequest实现https双向认证请求 中有讲述，不理解的读者可以先复习一下。本文是用UIWebView来实现对需要客户端证书验证的服务请求，网上有些文章中有涉及到此内容，但都只言片语，没有讲完全，更没有完整的代码，让人困扰不已。但是此知
  • NoSQL数据库之Redis数据库管理(Redis高级应用之事务处理、持久化操作、pub_sub、虚拟内存) bijian1013 redis数据库NoSQL
    3.事务处理         Redis对事务的支持目前不比较简单。Redis只能保证一个client发起的事务中的命令可以连续的执行，而中间不会插入其他client的命令。当一个client在一个连接中发出multi命令时，这个连接会进入一个事务上下文，该连接后续的命令不会立即执行，而是先放到一个队列中，当执行exec命令时，redis会顺序的执行队列中
  • 各数据库分页sql备忘 bingyingao oraclesql分页
    ORACLE 下面这个效率很低 SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_FS_RETURN order by id desc) A ) WHERE RN <20; 下面这个效率很高 SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_
  • 【Scala七】Scala核心一：函数 bit1129 scala
    1. 如果函数体只有一行代码，则可以不用写{},比如 def print(x: Int) = println(x) 一行上的多条语句用分号隔开，则只有第一句属于方法体，例如   def printWithValue(x: Int) : String= println(x); "ABC"   上面的代码报错，因为，printWithValue的方法
  • 了解GHC的factorial编译过程 bookjovi haskell
    GHC相对其他主流语言的编译器或解释器还是比较复杂的，一部分原因是haskell本身的设计就不易于实现compiler，如lazy特性，static typed，类型推导等。 关于GHC的内部实现有篇文章说的挺好，这里，文中在RTS一节中详细说了haskell的concurrent实现，里面提到了green thread，如果熟悉Go语言的话就会发现，ghc的concurrent实现和Go有点类
  • Java-Collections Framework学习与总结-LinkedHashMap BrokenDreams LinkedHashMap
            前面总结了java.util.HashMap，了解了其内部由散列表实现，每个桶内是一个单向链表。那有没有双向链表的实现呢？双向链表的实现会具备什么特性呢？来看一下HashMap的一个子类——java.util.LinkedHashMap。       
  • 读《研磨设计模式》-代码笔记-抽象工厂模式-Abstract Factory bylijinnan abstract
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * Abstract Factory Pattern * 抽象工厂模式的目的是： * 通过在抽象工厂里面定义一组产品接口，方便地切换“产品簇” * 这些接口是相关或者相依赖的
  • 压暗面部高光 cherishLC PS
    方法一、压暗高光&重新着色 当皮肤很油又使用闪光灯时，很容易在面部形成高光区域。 下面讲一下我今天处理高光区域的心得： 皮肤可以分为纹理和色彩两个属性。其中纹理主要由亮度通道（Lab模式的L通道）决定，色彩则由a、b通道确定。 处理思路为在保持高光区域纹理的情况下，对高光区域着色。具体步骤为：降低高光区域的整体的亮度，再进行着色。 如果想简化步骤，可以只进行着色（参看下面的步骤1
  • Java VisualVM监控远程JVM crabdave visualvm
    Java VisualVM监控远程JVM    JDK1.6开始自带的VisualVM就是不错的监控工具. 这个工具就在JAVA_HOME\bin\目录下的jvisualvm.exe, 双击这个文件就能看到界面   通过JMX连接远程机器, 需要经过下面的配置: 1. 修改远程机器JDK配置文件 (我这里远程机器是linux).    
  • Saiku去掉登录模块 daizj saiku登录olapBI
    1、修改applicationContext-saiku-webapp.xml <security:intercept-url pattern="/rest/**" access="IS_AUTHENTICATED_ANONYMOUSLY" />  <security:intercept-url pattern=&qu
  • 浅析 Flex中的Focus dsjt htmlFlexFlash
    关键字：focus、 setFocus、 IFocusManager、KeyboardEvent 焦点、设置焦点、获得焦点、键盘事件 一、无焦点的困扰——组件监听不到键盘事件 原因：只有获得焦点的组件（确切说是InteractiveObject）才能监听到键盘事件的目标阶段；键盘事件（flash.events.KeyboardEvent）参与冒泡阶段，所以焦点组件的父项（以及它爸
  • Yii全局函数使用 dcj3sjt126com yii
    由于YII致力于完美的整合第三方库，它并没有定义任何全局函数。yii中的每一个应用都需要全类别和对象范围。例如，Yii::app()->user;Yii::app()->params['name'];等等。我们可以自行设定全局函数，使得代码看起来更加简洁易用。(原文地址) 我们可以保存在globals.php在protected目录下。然后，在入口脚本index.php的，我们包括在
  • 设计模式之单例模式二（解决无序写入的问题） come_for_dream 单例模式volatile乱序执行双重检验锁
                    在上篇文章中我们使用了双重检验锁的方式避免懒汉式单例模式下由于多线程造成的实例被多次创建的问题，但是因为由于JVM为了使得处理器内部的运算单元能充分利用，处理器可能会对输入代码进行乱序执行（Out Of Order Execute）优化，处理器会在计算之后将乱序执行的结果进行重组，保证该
  • 程序员从初级到高级的蜕变 gcq511120594 框架工作PHPandroidhtml5
    软件开发是一个奇怪的行业，市场远远供不应求。这是一个已经存在多年的问题，而且随着时间的流逝，愈演愈烈。 我们严重缺乏能够满足需求的人才。这个行业相当年轻。大多数软件项目是失败的。几乎所有的项目都会超出预算。我们解决问题的最佳指导方针可以归结为——“用一些通用方法去解决问题，当然这些方法常常不管用，于是，唯一能做的就是不断地尝试，逐个看看是否奏效”。 现在我们把淫浸代码时间超过3年的开发人员称为
  • Reverse Linked List hcx2013 list
    Reverse a singly linked list.   /** * Definition for singly-linked list. * public class ListNode { * int val; * ListNode next; * ListNode(int x) { val = x; } * } */ p
  • Spring4.1新特性——数据库集成测试 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • C# Ajax上传图片同时生成微缩图(附Demo) liyonghui160com
        1.Ajax无刷新上传图片,详情请阅我的这篇文章。（jquery + c# ashx）         2.C#位图处理  System.Drawing。         3.最新demo支持IE7,IE8,Fir
  • Java list三种遍历方法性能比较 pda158 java
    从c/c++语言转向java开发，学习java语言list遍历的三种方法，顺便测试各种遍历方法的性能，测试方法为在ArrayList中插入1千万条记录，然后遍历ArrayList，发现了一个奇怪的现象，测试代码例如以下： package com.hisense.tiger.list; import java.util.ArrayList; import java.util.Iterator;
  • 300个涵盖IT各方面的免费资源（上）——商业与市场篇 shoothao seo商业与市场IT资源免费资源
    A.网站模板+logo+服务器主机+发票生成 HTML5 UP:响应式的HTML5和CSS3网站模板。 Bootswatch:免费的Bootstrap主题。 Templated:收集了845个免费的CSS和HTML5网站模板。 Wordpress.org|Wordpress.com:可免费创建你的新网站。 Strikingly:关注领域中免费无限的移动优
  • localStorage、sessionStorage uule localStorage
    W3School 例子   HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储   之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他