meta属性在HTML中占据了很重要的位置。如：针对搜索引擎的SEO，文档的字符编码，设置刷新缓存等。...maximum-scale 最大缩放比例 minimum-scale 最小缩放比例 user-scalable 是否允许用户缩放(yes/no) minimal-ui...iOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。...，144x144 像素，可以没有，推荐大家使用 title最好限制在六个中文长度内，超长的内容会被隐藏...，添加到主屏后的标题（iOS 6 新增） 7、iOS 启动画面 iPad 的启动画面是不包括状态栏区域的。
●minimum-scale 最小缩放比例 ●user-scalable 是否允许用户缩放(yes/no) ●minimal-ui iOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏...400，iPhone 6 plus 上是 414px。...-- Retina iPad，144x144 像素，可以没有，但推荐有 --> IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。...-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) --> 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） 条 Smart App Banner（iOS 6+ Safari） --> iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148
以下是历史原因： 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，...双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。...原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后...所以一般都借助 iScroll; Android 3.0/iOS解决了非body元素的滚动问题，但滚动条不可见，同时iOS上只能通过2个手指进行滚动； Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果...，不过随后这个特性又被移除； iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果 在iOS上如果你想让一个元素拥有像 Native 的滚动效果，你可以这样做： .xxx { overflow
-- ios7.0版本以后，safari上已看不到效果 --> 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style...以下是历史原因，来源其他人的分享： 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放 (double tap to...双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。...原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接， 此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作...chrome && ua.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.
这样就可以做到当我们在浏览桌面端网页的时候，可以让桌面端端网页正常显示（我们普通页面设计的时候，一般页面的主区域是以960px来做的，所以980px这个值，可以做到桌面端网页的正常显示）。...同时，即使是基于980的viewport，我们在移动端浏览我们的桌面页面的体验其实也并不好，所以，一般的，我们会专门给浏览器设计一个移动端的页面。...3D 空间如何呈现：保留3D */ -webkit-transform-style: preserve-3d; /* 设置进行转换的元素的背面在面对用户时是否可见：隐藏 */ -webkit-backface-visibility...href="touch-icon-ipad-retina.png" /> iOS下针对不同设备定义不同的桌面图标。...114114（px），ipad尺寸为72*72（px) 启动画面 iOS下页面启动加载时显示的画面图片
6.icon需要有29*29 和 58*58 7.模拟器快捷键： 8.沙盒：IOS将各个APP分别存放再文件系统的独立位置 模拟器中的沙盒位置：~/Library/资源库/Application...UIKIT框架结构 UIView是视图的基类 UIViewController是视图控制器的基类 12.每个应用至少一个窗口，UIWindow继承UIView 自动创建（xcode4.5之后） 13....UIScreen对象可以充当IOS设备物理屏幕的替代者 14.Iphone4之前320*480 IPHone4，4s是640*960 iphone5设备屏幕：640*1136 ipad/ipad2...：1024*768 ipad3/ipad4:2048*1536 ipad mini: 1024 *768 15....viewWithTag:2];或者tag为2的视图 其他属性：子视图会继承父视图属性 alpha透明度0.0~1 backgroundColor背景颜色 subviews子视图集合 hidden是否隐藏
-webkit-tap-highlight-color: transparent 解释：这个属性只用于iOS (iPhone和iPad)。..., iPad上的safari浏览器中有个将网站添加到主屏幕上的按钮，当网站设置了rel=”apple-touch-icon属性，当网站添加到屏幕上，屏幕上会显示网站的图标点击此处查看详细解释 6....在iOS上实现模糊效果的代码 -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); 7.... 解释：启用webapp的全屏模式，删除iPad或者iPhone上默认的工具栏和菜单栏 22... 解释：iphone的私有标签，它用于给iphone上的safari
一、背景 2014下半年，微信iOS版先后适配iPad, iPhone6/6plus。随着这些大屏设备的登场，部分用户觉得微信的字体太小，但也有很多用户不喜欢太大的字体。...，在320宽的屏幕下是20，在iphone6 plus屏幕上就是20 / 320 * 414=26 button_margin3: 20 EqualDifference 320; 表示在不同设备下做等差缩放...，在320宽的屏幕下是200，在iphone6 plus屏幕上就是200 + (414-320) = 294 table_bkg_color: DEFAULT_TABLE_BACKGROUND_COLOR...四、webview字体放大 iOS上，可以在webview页面load完后，设置页面body的style.webkitTextSizeAdjust属性，对页面进行放大。...五、iOS9 iPad分屏多任务 WWDC2015上推出了iPad分屏多任务功能，使得iOS设备的逻辑分辨率又多了五种： ?
前言 iOS上的一个Web App（下图中的「念」）和Native App(原生应用)在外观上看起来基本上一样，但是其使用的技术是HTML，CSS，Javascript，而不是原生应用所使用的Objective-C...本文简单介绍一下如何把一个Web站点改造成iOS上的Web App，这里假设你的网站是响应式设计（responsive design）或者已经做过移动端的适配。...如果你的网站也要可以在Ipad上访问，那么你还要针对不同的设备准备不同尺寸的icon，你可以通过sizes属性来指定icon的尺寸： iphone.png"...ipad所需icon的尺寸是72x72，retina屏幕的iphone所需的尺寸是114x114，retina屏幕的ipad所需的尺寸是144x144。...启动界面 像原生应用一样，你也可以给Web App加上一个启动界面，很简单： 在iPhone
第三个坑是它给只读的style属性赋值，这种方式在严格模式是被禁止的，而这插件正好自个又用了严格模式 坑就坑在：在Angular.JS（1）环境下使用iPad的时候才报错，PC上用Angular.JS正常...，还有一种缩放叫做双击缩放，而iPad下是没有双击事件的，所以只能模拟 引用st上的一段双击事件支持 (function($){ // Determine if we on iPhone...的safari与Mac的safari进行远程调试时，MAC的iOS系统不能比iPhone的低，否则无法连接上，即“开发”菜单栏下的看不到连接的iPhone信息 58. iPhone或iPad的safari...上的safari是能嵌入的，不过在iPhone或iPad下失效，但是能直接通过链接打开，所以解决办法是通过嵌入pdf文件的地址，不过还有问题，见下一个 59. ...iPhone或iPad的safari浏览器通过嵌入pdf来预览时，只能看到第一页，无法滚动翻页查看更多 这个问题是ios自家的bug了，所以为了解决，只能引入第三方支持（不再使用浏览器自身支持的
在sizeclass为（any,any）时布局的控件可以显示在任何尺寸的设备上，包括所有尺寸的iPhone和iPad。...横屏状态的iPhone不会显示这个控件，横屏和竖屏状态的iPad也不会显示这个子控件。 所以，当我们希望某个控件在横屏是显示，在竖屏时不显示的时候，可以考虑有sizeClass这种技术。...也就是说，在sizeClass为W Regular H Regular状态下的布局只会出现在所有横屏或竖屏的iPad设备上，并不会出现在横屏或者竖屏的iPhone设备上。 ?...右上角添加蓝色button.png 4> 然后我们预览在iPad和iPhone设备上横竖屏的显示情况，如下图： iPad设备横竖屏显示情况，如下图(因屏幕尺寸太小，需要滚屏，显示效果不好)： ?...综上，验证了sizeClass为W Regular H Regular状态时，在控制器上的布局只会显示在iPad横屏或者竖屏状态下，而不会显示在iPhone的横屏或者竖屏状态下。
ipod) {os.ios = os.iphone = true, os.version = iphone[2].replace(/_/g, '.');} if (ipad) {os.ios...= os.ipad = true, os.version = ipad[2].replace(/_/g, '.');} if (ipod) {os.ios = os.ipod = true...，在视口设置当中，可以通过调整缩放值，控制网页的整体缩放。...在页面顶部添加meta，设置视口信息，将width设置为PSD图的实际宽度（即制作页面时的实际宽度）。但是不需要设置缩放值。...另外，对于横屏转回到纵屏的时候，实际上我们是可以进行设备方向检测，然后再触发一次页面刷新，就不会出现纵屏上的问题了~ 最后的话：我们使用了这个框架进行页面的开发，但是最近在使用时，感觉到在一些浏览器当中有些卡顿
另外提醒：iOS UI 的标准字体是苹果亲自设计的「SF」打开本档案前先确保你已经装好字体在计算机里了，没有字体文件的话到这里下载：https://developer.apple.com/fonts/（...了，虽然 Sketch 自己内建的 iOS UI Design Template 也有利用这项功能，但实际使用上可能仍稍嫌不足（有些外挂也能够达成一样的缩放功能，但用外挂做图就代表别人开了有可能坏掉，...本套件很彻底地利用了这个新功能，大部分的 UI 零件都能够自由缩放，例如 Navigation Bar 及 Tab Bar 使用在三种大小的 iPhone 上： ? 甚至是 iPad UI： ?...但一般来说，iPhone 用 Compact、iPad 用 Regular（还是有例外，请自行研究啰！）。...首先我们在右边再放上一条 Navigation Bar，图层顺序左在上、右在下，这样左边 Navigation Bar 的阴影会很自然迭在右边那条的上面（见下图）——由于 Sketch 不将阴影的宽度计算在物体内
iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师，都应当理解并熟悉平台的设计规范。...在iOS 13及更高版本中，默认情况下，大标题导航栏不包含背景材质或阴影。另外，随着页面滑动，大标题要转换为标准标题。 ? 隐藏大标题导航栏的边框。...在iOS 13及更高版本中，可以通过删除导航栏的阴影来隐藏导航栏的底部边框（当滑动内容区域时，边框会自动重新出现）。无边框样式在大标题导航栏中效果很好，因为它增强了标题和内容之间的联系感。...三、侧边栏（Sidbars） 侧边栏在iPhone上使用较少，更多的用在iPad。它提供了应用程序的导航，在侧边栏中选择一项可以使人们导航到特定的内容。例如，“邮件”中的边栏显示所有邮箱的列表。...通常，在iPhone上使用三到五个标签；如果需要，在iPad上可以接受更多一些。 当人们导航到您应用中的其他区域时，请不要隐藏标签栏。标签栏可为您的应用启用全局导航，因此它在任何地方都应保持可见。
(head 头部必须)，页面关键词 keywords，页面描述内容 description，定义网页作者 author，网页搜索引擎索引方式 为移动设备添加 viewport viewport 可以让布局在移动浏览器上显示的更好...-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz...maximum-scale 最大缩放比例 minimum-scale 最小缩放比例 user-scalable 是否允许用户缩放(yes/no) ios 设备，iOS 图标，Android，Windows...-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz...-- 添加 favicon icon --> 标题 页面切换动画 移动端重构系列13——页面切换 CSS3
一旦网页过期，必须到服务器上重新传输。--> 页面内容。...--指明页面中脚本的类型--> IOS的头部设置 条 Smart App Banner（iOS 6+ Safari） --> 缩放--> 页面使用的字符集。...-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） --> <meta name="apple-mobile-web-app-status-bar-style
手边有iPhone或iPad的同学可以先按照下面的方式实验： 1、用iPhone或iPad上的Safari浏览器打开链接：http://pattern.dk/sun/，点击底部的发送按钮 ?...接下来我们以HT for Web的拓扑应用为例，试着实现这样一个”高仿”的APP，先看一下我们的页面在iPhone浏览器中的效果： ?...--页面缩放方式--> 在主屏上显示的名字--> 在主屏上显示的图标--> <!
劣势：需加载适配各个终端的各个资源，在不同终端通过响应式布局实现不同展现，部分交互效果需要在页面中做终端判断，代价较大，若图片资源为一套，部分图片在超高分辨率设备（例如iphone系列）下会失真，且在非...思路二:通过终端判断分别调取两套资源以适配所有终端 优势：可根据不同端做个性设计及个性化信息推送且可按需加载，如移动端可配合重力感应、不同手势做各种炫酷拽效果，pc页面可不受流量限制做适合pc端的效果。...二、pc上的网站在移动端上怎么办？...（一）几个概念 1.css像素 html中度量的单位 用px来计算，在pc中往往 1 css px ＝ 1 物理像素 css像素时抽象和相对的了，在不同设备中1px对应不同的设备像素；iphone3分辨率是...为640 //target-densitydpi=device-dpi 标示使用设备本身物理屏幕的像素,不会发生默认缩放 miniual-ui ios的safari为meta表天新增的属性，在网页加载是隐藏顶部的地址栏和底部的导航栏
手边有iPhone或iPad的同学可以先按照下面的方式实验： 1、用iPhone或iPad上的Safari浏览器打开链接：http://pattern.dk/sun/，点击底部的发送按钮 ?...接下来我们以HT for Web的拓扑应用为例，试着实现这样一个”高仿”的APP，先看一下我们的页面在iPhone浏览器中的效果： ? ...--页面缩放方式--> 在主屏上显示的名字--> 在主屏上显示的图标--> <!
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
