5. rel=”apple-touch-icon” 解释：在iPhone, iPad上的safari浏览器中有个将网站添加到主屏幕上的按钮，当网站设置了rel=”apple-touch-icon属性...html标签)的字体大小都为16px，即 html标签的font-size:16px，1rem = 16px,为了让后面方便计算，通常将1rem的值设为10px，通过将html标签的font-size值设为...=1.0表示网页的最大缩放比例、minimum-scale=1.0表示网页的最小缩放比例、user-scalable=no表示不允许用户自己缩放网页 17.... 解释：启用webapp的全屏模式，删除iPad或者iPhone上默认的工具栏和菜单栏 22... 解释：iphone的私有标签，它用于给iphone上的safari
到 10,000 ） initial-scale: 初始的缩放比例 （范围从>0到 10 ） minimum-scale: 允许用户缩放到的最小比例 maximum-scale: 允许用户缩放到的最大比例...想达到全屏显示的效果必须先通过Safari将网页添加到主屏，再通过主屏的图标打开网站，直接在Safari输入URL是不行的。.../ 针对iPhone 4s 设置的字号是16px color:#333; border:0px; outline:none; } 确定了iPhone 4s的字号大小，其他分辨率可以先估一个值...，会以各自的字号大小为基准，成比例的缩放。...2、JS交互效果 在web端我们常常会引入jquery文件，但是在移动端我们不得不考虑网络带宽、流量的限制，尽量减少代码量。所以，JS库的使用则是能少则少了。
CSS技巧大杂烩 01 Safari 中z-index的层级问题 在Safari浏览器下(此Safari浏览器包括iOS的Safari，iPhone上的微信浏览器，以及Mac OS X系统的Safari...浏览器)，当我们使用3D transform变换的时候，如果祖先元素没有overflow:hidden/scroll/auto等限制，则会直接忽略自身和其他元素的z-index层叠顺序设置，而直接使用真实世界的...如果仅设置值padding-top/bottom为百分比，会出现一个问题，就是该方法容器的max-height属性会失效，就无法限制容器的最大高度了。...因此，可以给容器添加一个伪元素的子元素用于撑起内容，该子元素拥有一个padding-top:100%，同时给容器一个max-height尝试限制容器的高度，最后内容用绝对定位的方式添加即可。...min-width: 375px) { html { /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
例如：iPhone3G/S和iPhone4/S的屏幕尺寸都为 3.5 英寸（in）但是屏幕分辨率却分别为 480x320px、960x480px，由此我们可以得出英寸是一个绝对长度单位，而像素是一个相对长度单位...4、设备独立像素 随着技术发展，设备不断更新，出现了不同PPI的屏幕共存的状态（如iPhone3G/S为163PPI，iPhone4/S为326PPI），像素不再是统一的度量单位，这会造成同样尺寸的图像在不同...PPI设备上的显示大小不一样。...3.1、系统浏览器 指跟随移动设备操作系统一起安装的浏览器，一般不能卸载。比如 iPhone 的 safari 浏览器。...例如：.box {font-size: 16px;} 则 1em = 16px .box {font-size: 32px;}则 1em = 32px，0.5em = 16px rem 相对长度单位（参照
我们常说的分辨率就是长和宽上像素点的个数，比如 IPhone X 的分辨率是 1125×2436，代表屏幕横向和纵向分别有 1125 和 2436 个像素点，这里的像素是设备像素（Device Pixels...设备像素对应屏幕上的光点，如今的屏幕分辨率已经达到人眼无法区分单个像素的程度了。试想一下，要在 IPhone X 宽不到 7cm 的屏幕上数出 1125 个像素点，想想就让人头疼。...layout viewport 为了解决早期 Web 页面在手持设备上的显示问题，Apple 在 IOS Safari 中定义了一个 viewport meta 标签，它可以创建一个虚拟的布局视口（layout...试想一下，假如我们现在有一台 IPhone 6（375×627），它会在宽为 375px 的 visual viewport 上，创建一个宽为 980px 的 layout viewport，于是用户可以在...内容会溢出视口外，导致出现横向滚动条对不对，这在移动端是非常不好的浏览体验，因为用户往往更习惯上下滚动，而不是左右滚动，所以我们需要确保图片内容不要超出 viewport，可以通过设置元素的最大宽度进行限制
早在 2007 年初，苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。...这当中最出名的，当属双击缩放(double tap to zoom)，这也是会有上述 300 毫秒延迟的主要原因。...双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢？ ?...鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。...在页面的DOM文档加载完成后 fastClick.attach(document.body) 如果你用过FastClick在移动端，就会发现有一个体验很不好的问题，某些ios上，点击输入框想唤启软键盘，
让我们举一个关于缩放的栗子，浏览器实现缩放的原理实际上就是通过拉伸像素来实现的： 假设现在整个屏幕来展现一个CSS像素宽度为128px的元素，屏幕的设备像素宽度是128px，那么实际上1个CSS像素等于...设备像素对于开发来说基本上没用，缩放比例对你来说也没有什么影响，CSS会将展示效果处理的很好，但理解这个概念对接下来讲的会有所帮助，接下来很多度量是以CSS像素为单位的。...这样我们知道viewport实际上就是浏览器窗口，它的大小是由浏览器特性所决定的，一旦页面渲染完成，无所是缩放操作还是其他什么操作都不会让它变化。...解释一下就是，visual viewport是页面当前显示在屏幕上的部分，用户可以通过滚动来改变他所看到的页面部分，或者通过缩放来改变visual viewport的大小。...layout viewport就是一个页面渲染之后具有固定大小的大框，跟之前提到PC上的概念相似，我们知道它的大小是由浏览器特性来决定的，在PC端就是等于窗口大小，但在移动端不同浏览器的值不同，比如Safari
思路二:通过终端判断分别调取两套资源以适配所有终端 优势：可根据不同端做个性设计及个性化信息推送且可按需加载，如移动端可配合重力感应、不同手势做各种炫酷拽效果，pc页面可不受流量限制做适合pc端的效果。...二、pc上的网站在移动端上怎么办？...设置页面的初始缩放值，数字或小数 minimum-scale 允许用户的最小缩放值 数字或小数 maximum-scale 允许用户的最大缩放值 数字或小数 height 设置layout viewport...//UI-width: 布局宽度 //device-width:屏幕分辨率宽度 iphone4为640 //target-densitydpi=device-dpi 标示使用设备本身物理屏幕的像素,不会发生默认缩放...miniual-ui ios的safari为meta表天新增的属性，在网页加载是隐藏顶部的地址栏和底部的导航栏 （三）相关代码讲解 移动页面设计 480*854的比例 dpi = 480/screen.widthwindow.devicePixelRatio160
相对长度单位指定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放更好。...实际上，px 不是自然界的绝对长度单位。px 的长度大小在不同的设备分辨下是不同的，从这个意义上看 px 也是相对的。 但是如 pt 单位，大小为1/72英寸，是一个自然界标准的长度单位。...是因为 iphone6 的css像素（逻辑像素）是 375px。 dpr=物理像素/逻辑像素，iphone6 的dpr为2。...劣：无viewport缩放，且针对iPhone的Retina屏没有做适配，导致对一些手机的适配不是很到位。...优：通过动态根font-size、viewpor、dpr来做适配，无兼容性问题，适配精准（动态计算 viewport 和针对 iphone 手机的 dpr 缩放调整，使得页面适配更加精确）。
在viewport中有两种视口，分别表示为： visual viewport（视觉视口）：浏览器内看到的网站的显示区域，用户可以通过缩放来查看网页，从而改变视觉视口。...下就是110.4px 但在实际开发中，这样会导致默认font-size很大，相当于是html的font-size为100px了，这个时候就要重置一下body的font-size:16px <...自适应布局也从PC延伸到手机，成为网页设计时候的需求. （2）概念 就是宽度自适用布局，在不同大小的设备上，随着屏幕宽度缩放，网页以等比例的形式缩放宽度(包括内容))，不管屏幕宽度为多少，网页主体排版布局总是一样的...响应式布局 （1）出现的背景 自适应虽然成为网页设计的必要需求，但还是暴露出一个问题，如果屏幕太小，即使网页内容能够根据屏幕大小进行适配，但是在小屏幕上查看，会感觉内容过于拥挤，降低了用户体验。...em 相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
一般所有浏览器的html根元素font-size:16px 1rem = 16px 所以所有px值都基于它来换算 设计稿px/换算的rem = 16px / 1 ===> 换算的rem= 设计稿...px/16px 一般我们拿到的移动端设计稿是基于iphone6的 所以一般以这个确定的屏幕做参考 iphone6的屏幕宽度为375px 所以设置基准rem = 375 /10 =37.5 为啥/...10，这个无所谓，只是一个自定义规定，为了让根px不要那么大 除了设置html根元素上的font-size之外，还要配合flexible.js使用 什么是flexible.js？...： 1、为html添加data-dpr属性和style属性，style添加font-size作为1rem的基准值。...2、改写meta标签，根据dpr设置设备的缩放比。
rem单位大家可能已经很熟悉，rem是随着html的字体大小来显示代表宽度的方法，我们怎样进行移动端响应式开发呢 浏览器默认的字体大小为16px 及1rem 等于 16px 如果我们想要使1rem等于...-- 12/16 --> } 我们再来看一下各个浏览器的屏幕宽度 iphone4 320 iphone5 320 iphone6 375 iphone6p 414 大部分的安卓手机屏幕显示宽度为...360 我们公司的设计是以iphone6为基础设计的 及以375的为准设计的 如果想在 iphone其他版本中按iphone6比例自动缩放那么我们需要进行简单的缩放运算,同时也以1rem等于12px为例... iphone4 320/375*75% = 64% iphone5 320/375*75% = 64% iphone6 375/375*75% =75% iphone6p 414.../375*75% =82.8% 安卓 360/375*75% =72% 我们可以这样设置在不同媒体中的字体的rem比例 由于安卓和iphone6区别较小，所以设置时忽略其差异
首先需要计算缩放比，例如 iPhone5-DPR=2，则 scale=0.5 var scale = 1 / window.devicePixelRatio; 接着，修改viewport参数initial-scale...标签的font-size值(本案例100) 如：60px宽的div，不必关心屏幕尺寸缩放，只需要除以100，设置 width: 0.6rem; 即可 5....Step5: 媒体查询设置body字体大小 其实完成了上述Step1～4，已经基本完成了移动端的适配工作，然而，有些情况下，如资讯类文字较多的页面，如果在大屏设备上展示，文字会过大，影响阅读体验，此时需要调整文字大小...@media screen and (max-width: 321px) { body { font-size:16px; } header,footer { font-size:16px...: none; 3.最小宽度和最大的宽度 在移动端开发的时候，如果想限制某个元素的大小，选用 max-width 限制最大值，为了不让用户无止境的缩放，使用min-width 防止在超小屏幕上显示错乱(
1:1，并且文档最大的宽度比例是 1.0，且不允许用户点击屏幕放大浏览； width - viewport 的宽度 height - viewport 的高度 initial-scale - 初始的缩放比例...minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放 第二个 meta 标签是 iphone...设备中的 safari 私有 meta 标签，它表示：允许全屏模式浏览； 第三个 meta 标签也是 iphone 的私有标签，它指定的 iphone 中 safari 顶端的状态条的样式； 在 web...注意：若值为 “black-translucent” 将会占据页面 px 位置，浮在页面上方（会覆盖页面 20px 高度–iphone4 和 itouch4 的 Retina 屏幕为 40px）。...第四个 meta 标签表示：告诉设备忽略将页面中的数字识别为电话号码； 第五个 meta 标签表示：这个标签是告诉 iphone 的 safari 浏览器，这个网站对应的 app 是什么，然后在页面上面显示一个下载
诞生史 在 2007 年，苹果公司发布首款 iPhone 之前，由于当时的网站普遍为大屏幕设备所设计，为了应对 iPhone 这种小屏幕设备浏览桌面网站的问题，由此，苹果引入了多项变革，其中就包含了“双击缩放准确定位正文主体...因此，IOS Safari 浏览器首先引入了 300 毫秒延迟，用来判断用户是否会再次点击，也就是说，在第一次点击延迟 300 毫秒，300 毫秒后用户没有再次点击则认定为用户在进行普通的单击操作，并触发单击...鉴于 iPhone 的巨大成功，其他浏览器厂商也都快步跟进纷纷效仿了 iPhone Safari 浏览器的做法。于是，单击事件延迟成为了移动开发者不得不面对的痛。...指针事件 指针事件是 Microsoft 提出的一系列针对 Web 的新事件，现已成为 W3C 规范。指针事件规范是尝试使用单个事件模型统一我们对所有输入类型（鼠标，触摸，手写笔等）的处理。...eventTarget.dispatchEvent 触发对应目标元素上绑定的 click 事件。
老版常规做法 1.1 viewport缩放 以最小的Iphone4/5的宽度（320px）为基准，还原视觉稿。... 然后对不同屏幕分辨率的手机进行简单粗暴的等比例缩放设置...典型的墨守成规、因循守旧、故步自封、抱残守缺做法，放在现在各种“大屏手机”上，用户量恐怕要分分钟损失80%。 ?...12pxoHtml.style.fontSize = 12 * (width / 320) + "px"; 这样iphone8（375px）下html的font-size 就是14.0625px，iphone8p...而rem用在字号时，使字号在不同屏幕上的绝对尺寸不一致，违背了设计哲学。 5.
前言 iOS上的一个Web App（下图中的「念」）和Native App(原生应用)在外观上看起来基本上一样，但是其使用的技术是HTML，CSS，Javascript，而不是原生应用所使用的Objective-C...本文简单介绍一下如何把一个Web站点改造成iOS上的Web App，这里假设你的网站是响应式设计（responsive design）或者已经做过移动端的适配。...，initial-scale=1.0指的是初始缩放倍数为1.0(即不缩放)，maximum-scale=1.0指的是最大的缩放倍数是1.0，user-scalable=no指用户不可以手动进行缩放。...如果你的网站也要可以在Ipad上访问，那么你还要针对不同的设备准备不同尺寸的icon，你可以通过sizes属性来指定icon的尺寸： <link href="touch-icon-<em>iphone</em>.png"...72x72，retina屏幕的iphone所需的尺寸是114x114，retina屏幕的ipad所需的尺寸是144x144。
-- ios7.0版本以后，safari上已看不到效果 --> 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style...以下是历史原因，来源其他人<em>的</em>分享： 2007年苹果发布首款<em>iphone</em><em>上</em>IOS系统搭载<em>的</em><em>safari</em>为了将适用于PC端上大屏幕<em>的</em>网页能比较好<em>的</em>展示在手机端上，使用了双击<em>缩放</em> (double tap to...双击<em>缩放</em>是指用手指在屏幕<em>上</em>快速点击两次，iOS 自带<em>的</em> <em>Safari</em> 浏览器会将网页<em>缩放</em>至原始比例。...原因就出在浏览器需要如何判断快速点击<em>上</em>，当用户在屏幕<em>上</em>单击某一个元素时候，例如跳转链接， 此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行<em>缩放</em>操作...什么是Retina 显示屏，带来了什么问题 retina：一种具备超高像素密度<em>的</em>液晶屏，同样大小<em>的</em>屏幕<em>上</em>显示<em>的</em>像素点由1个变为多个，如在同样带下<em>的</em>屏幕<em>上</em>，苹果设备<em>的</em>retina显示屏中，像素点1个变为4
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
