开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为一个代码库提供非Retina和Retina显示器:用于在iPhone或iOS设备上扩展HTML5应用程序的布局和资产的框架？

非Retina和Retina显示器是指在iPhone或iOS设备上的显示器类型，其中非Retina显示器指的是传统的分辨率较低的显示器，而Retina显示器则具有更高的分辨率和更清晰的显示效果。

为一个代码库提供非Retina和Retina显示器:用于在iPhone或iOS设备上扩展HTML5应用程序的布局和资产的框架，可以使用以下方法：

响应式设计：响应式设计是一种设计方法，可以根据不同设备的屏幕尺寸和分辨率自动调整布局和资产。通过使用CSS媒体查询和流式布局，可以确保在Retina和非Retina显示器上都具有良好的显示效果。
使用图片格式：使用适用于Retina和非Retina显示器的图片格式，例如使用@2x和@3x等后缀来表示不同分辨率的图片。在HTML代码中，可以使用srcset属性来指定不同分辨率的图片，以便在不同设备上自动加载适当的图片。
使用视网膜图片：视网膜图片是指在Retina显示器上使用的高分辨率图片，可以通过在HTML代码中使用data-src属性来指定视网膜图片的URL，并在JavaScript代码中根据设备的分辨率自动加载适当的图片。
使用CSS预处理器：使用CSS预处理器，例如Sass或Less，可以使用变量和嵌套等功能来更好地组织和管理CSS代码，从而更容易地适应Retina和非Retina显示器的不同布局和资产。

推荐的腾讯云相关产品：

腾讯云对象存储：腾讯云对象存储是一种分布式存储服务，可以用于存储和管理非结构化数据，例如图片、视频和音频等文件。通过使用腾讯云对象存储，可以确保在Retina和非Retina显示器上都能够快速加载和访问适当的资产。
腾讯云内容分发网络：腾讯云内容分发网络是一种全球分布式的内容分发网络，可以用于加速全球访问速度，提高用户体验。通过使用腾讯云内容分发网络，可以确保在Retina和非Retina显示器上都能够快速加载和访问适当的资产。
腾讯云云巢：腾讯云云巢是一种容器化的应用部署平台，可以用于部署和管理HTML5应用程序。通过使用腾讯云云巢，可以确保在Retina和非Retina显示器上都能够快速加载和访问适当的布局和资产。

产品介绍链接地址：

腾讯云对象存储：https://cloud.tencent.com/product/cos
腾讯云内容分发网络：https://cloud.tencent.com/product/cdn
腾讯云云巢：https://cloud.tencent.com/product/tke

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【iOS 开发】iOS 开发简介 (IOS项目文件 | MVC 模式 | 事件响应机制 | Storyboard 控制界面 | 代码控制界面 | Retina 屏幕图片适配)

; -- 自动链接 : 框架和库一旦被添加到该目录后, 会自动链接到应用中, IOS 应用可以调用这些资源和库中的类和函数; -- 系统默认框架 : Foundation.framework,...IOS 图片规格 (1) Retina 视网膜屏 Retina 屏幕简介 : -- 像素 : 高清晰度的视网膜屏幕, 这种屏幕的分辨率是普通非 Retina 屏幕的 2 倍; -- 市场状况 : 目前...IOS 已经下架了所有的非 Retina 屏幕的设备, 目前在售的所有设备都是 Retina 设备, 但是之前卖出的许多设备有些不是 Retina 屏幕的; -- 支持 Retina 屏幕的设备 :...现在在售的所有设备, iphone4 ~ 6S, ipod4, ipad 2 之后的新设备; -- 不支持 Retina 屏幕设备 : 之前出售的低端 IOS 设备大都是非 Retina 屏幕的, ipod...@2x) : 152 x 152 ; 非 Retina 屏幕应用图标规格 : -- iPad 和 iPad Mini (@1x) : 76 x 76 ; -- iPhone 和 iPod : 57 x

5K3 0

HTML head 头标签总结

本篇以一丝的文章为基础，进行扩展总结介绍常用的 head 中各个标签、元素的意义以及使用场景。...如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响 html 排版布局。浏览器有三种方式解析 HTML 文档。... 相关链接：WEB1038 - 标记包含无效的值 viewport viewport 可以让布局在移动浏览器上显示的更好...=414"> 大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为...-- Retina iPad，144x144 像素，可以没有，但推荐有 --> IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。

1.9K7 0

买苹果设备需要注意哪些坑

2、3D Touch 好用吗 3D Touch 是 iPhone 6s 和 iPad Pro 新增的特性，它将 App 常用的操作和功能入口集成在 3D Touch 手势上（即，用力按压），可以类比成移动设备的...除以上三个因素以外，手机和平板设备通常应尽量选择金属机身和厚度较薄的设备，能大幅提升设备整体质感与美感。在容量选择上，注意一定不要购买 16G 的，一旦需要相机功能就会发现不够用。...如果不打算购买 iMac，则可以考虑给 MBP（MacBook Pro）外接一个显示器，在腾讯公司内部，使用的是可以自由旋转升降的 Dell IPS 屏，值得入手。...最后大家在选购 Mac 电脑时还需要注意：一定要选择 256GB 或 256GB 以上硬盘空间的型号，128GB 的硬盘肯定会不够用；Mac 电脑还有一个专门的教育购买渠道，能享受到九五折的优惠，可以找学生或老师朋友帮忙代买...上的一样困难；偷拍功能，由于苹果表可以唤起 iPhone 上的相机，这样你可以事先把 iPhone 对准你要拍摄的对象，调整好一个恰当的角度，然后假装在手表上看时间……这个功能我只是听说，没用过，真的

2.9K9 0

Flutter 大小单位详解

这样极容易对初学者造成误导，从事web前端或iOS原生开发的人，并没有dp的概念，当他们学习Flutter时，必须强行去理解dp的概念，且在iOS或web平台上时也解释为dp，那就是错误的。...到这里我们大概能明白Flutter官方的意思，Flutter框架希望提供一个新的尺寸单位的概念，称为逻辑像素，然后让大家忘记原生开发中的单位。...这是因为Flutter作为一个跨平台的框架，必须抽离出一个新的单位，用以适配不同的平台，如果还去使用原生的单位概念，就会造成混淆或屏幕适配的问题。...默认的逻辑坐标空间是用点来衡量的。对于Retina显示器，比例因子可能是3.0或2.0，一个点可以分别用9个或4个像素表示。对于标准分辨率显示器，比例系数为1.0，一个点等于一个像素。...简单说就是 scale == 1 ：代表320 x 480 的分辨率（iphone4之前的设备，非Retain屏幕） scale == 2 ：代表640 x 960 的分辨率（Retain屏幕） scale

1K2 0

Web App 相关技术

移动Web或者APP在技术本质上是和做桌面端Web没有本质区别，但是移动端的坑那是非常的多，通过学习这部分内容，让你成为一名桌面移动通吃的前端开发工程师。...author，网页搜索引擎索引方式为移动设备添加 viewport viewport 可以让布局在移动浏览器上显示的更好。...关于 XSS 跨网站脚本（Cross-site scripting，通常简称为XSS或跨站脚本或跨站脚本攻击）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。...它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。...根据 CommonJS 规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为 global 对象的属性。

7433 0

前端不止：Retina屏幕下两倍图

假设，以上这个logo的图像大小是1334 x 750像素和iPhone7屏幕分辨率一样，那么,一位图像素对应的就是一个设备像素，这就是会是一个完全保真的显示。...以Retina屏幕为例，它并不是像普通显示器那样通过增大尺寸来增加分辨率，而是靠提升屏幕单位面积内的像素数量，即像素密度来提升分辨率，这样就有了高像素密度屏幕。...因此，行动电话显示器的像素密度达到或高于300ppi就不会再出现颗粒感，而手持平板类电器显示器的像素密度达到或高于260ppi就不会再出现颗粒感，苹果电脑Mac的Retina显示器像素密度只要超过200ppi....box { width: 200px; height: 300px; font-size: 12px; } 上面的代码，将会在显示屏设备上绘制一个200x300像素的盒子，在标准屏幕下，它占据的就是...不是，一般情况下，不需要针对网站上的所有图片都提供两个版本（非Retina屏幕和Retina屏幕），大部分图片缩放并不会太多的影响用户的体验。

2.8K5 0

移动端web开发笔记

所以启动图片需要减去状态栏区域所对应的方向上的20px大小，相应地在retina设备上要减去40px的大小 <!...图标尺寸：可通过指定size属性来为不同的设备提供不同的图标（但通常来说，我们只需提供一个114 x 114 pixels大小的图标即可）官方说明如下 Create different sizes...以下是历史原因： 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，...retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个在高清显示屏中的位图被放大，图片会变得模糊...fastclick 加快移动端点击响应时间 animate.css CSS3动画效果库 Normalize.css Normalize.css是一种现代的、CSS reset为HTML5准备的优质替代方案

3.7K2 0

ios学习7_iPhone屏幕尺寸、分辨率及适配

iPhone3GS时代，我们为一个应用提供图标（或按钮提供贴图），只需要icon.png。针对现在的iPhone4~6 Retina显示屏，需要制作额外的@2x高分辨率版本。...在实际运行时，系统如果发现当前设备是Retina屏（scale=2），会自动寻找”*@2x.png”命名格式的图片，加载针对Retina屏的图片素材，否则会失真。...(s)时，在逻辑上宽度不变高度稍高，之前旧的素材和布局通过AutoresizingFlexible简单适配即可运行得很好，但由于高宽比增大，上下两端出现黑粗边（典型如LaunchImage）。...从分辨率的角度来看，iPhone6沿用二倍图（@2x），但需为iPhone6+提供更高的三倍图（@3x）；从屏幕尺寸角度来看，需要重新对UI元素尺寸和布局进行适配，以期视觉协调。...假如交互按照iPhone5(s)下绝对标注，则在iPhone4(s)上可能挤出屏幕底部，而在iPhone6(+)上则可能横向偏左或纵向偏上。

2.8K2 0

Flutter 大小单位详解

这样极容易对初学者造成误导，从事web前端或iOS原生开发的人，并没有dp的概念，当他们学习Flutter时，必须强行去理解dp的概念，且在iOS或web平台上时也解释为dp，那就是错误的。...到这里我们大概能明白Flutter官方的意思，Flutter框架希望提供一个新的尺寸单位的概念，称为逻辑像素，然后让大家忘记原生开发中的单位。...这是因为Flutter作为一个跨平台的框架，必须抽离出一个新的单位，用以适配不同的平台，如果还去使用原生的单位概念，就会造成混淆或屏幕适配的问题。...默认的逻辑坐标空间是用点来衡量的。对于Retina显示器，比例因子可能是3.0或2.0，一个点可以分别用9个或4个像素表示。对于标准分辨率显示器，比例系数为1.0，一个点等于一个像素。...简单说就是 scale == 1 ：代表320 x 480 的分辨率（iphone4之前的设备，非Retain屏幕） scale == 2 ：代表640 x 960 的分辨率（Retain屏幕） scale

2.8K0 0

IOS开发之尺寸

2或者除以3在进行赋值给frame，这其中的原因是因为标注一般都是按px格式给的，但是iOS底层绘制的时候是按照pt为单位进行绘制，这两个的区别在于： px就是表示pixel，像素，是屏幕上显示数据的最基本的点...iPhone3GS时代，我们为一个应用提供图标（或按钮提供贴图），只需要icon.png。针对现在的iPhone4~6 Retina显示屏，需要制作额外的@2x高分辨率版本。 ...在实际运行时，系统如果发现当前设备是Retina屏（scale=2），会自动寻找"*@2x.png"命名格式的图片，加载针对Retina屏的图片素材，否则会失真。...9.机型尺寸适配（Screen Scale Adaption）从iPhone3GS/iPhone4(s)过渡到iPhone5(s)时，在逻辑上宽度不变高度稍高，之前旧的素材和布局通过AutoresizingFlexible...从分辨率的角度来看，iPhone6沿用二倍图（@2x），但需为iPhone6+提供更高的三倍图（@3x）；从屏幕尺寸角度来看，需要重新对UI元素尺寸和布局进行适配，以期视觉协调。

3K4 0

ios学习7_iPhone屏幕尺寸、分辨率及适配

大家好，我是架构君，一个会写代码吟诗的架构师。今天说一说ios学习7_iPhone屏幕尺寸、分辨率及适配,希望能够帮助大家进步!!!...iPhone3GS时代，我们为一个应用提供图标（或按钮提供贴图），只需要icon.png。针对现在的iPhone4~6 Retina显示屏，需要制作额外的@2x高分辨率版本。...在实际运行时，系统如果发现当前设备是Retina屏（scale=2），会自动寻找"*@2x.png"命名格式的图片，加载针对Retina屏的图片素材，否则会失真。...(s)时，在逻辑上宽度不变高度稍高，之前旧的素材和布局通过AutoresizingFlexible简单适配即可运行得很好，但由于高宽比增大，上下两端出现黑粗边（典型如LaunchImage）。...从分辨率的角度来看，iPhone6沿用二倍图（@2x），但需为iPhone6+提供更高的三倍图（@3x）；从屏幕尺寸角度来看，需要重新对UI元素尺寸和布局进行适配，以期视觉协调。

9335 0

通过Xcode命令行编译

通过Xcode命令行编译本文档提供命令行常提到一些问题命令行工具是什么命令行工具包是一个小型独立包,可供下载独立于Xcode的和允许您执行命令行开发OS X，它由两部分组成：OS X SDK和命令行工具...他可以运行在包含一个或者多个Target的工程上面，或者在projects workspaces包含scheme上面。xcodebuild提供了几个选项，可以在Main Page看到这些。...key 描述 Value platform unit测试支持的平台 iOS name unit测试你设备全拼可以在Xcode的Devices Organizer找到你设备的名字 id unit测试你设备的...OS iOS支持的版本一个IOS版本 platform和name是比选的，OS是可选的。...=iOS Simulator,name=iPhone Retina (4-inch 64-bit),OS=7.1' -destination允许你在多个平台运行同一个unit测试，下面是同时添加多个平台的测试

6.2K4 0

HTML5中meta属性的使用详解

meta属性在HTML中占据了很重要的位置。如：针对搜索引擎的SEO，文档的字符编码，设置刷新缓存等。...设置为 default 或 black ,网页内容从状态栏底部开始。设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。...iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 title最好限制在六个中文长度内，超长的内容会被隐藏，添加到主屏后的标题（iOS 6 新增） 7、iOS 启动画面 iPad 的启动画面是不包括状态栏区域的。...和 iPod touch 的启动画面是包含状态栏区域的。

2.8K3 1

第119天：移动端：CSS像素、屏幕像素和视口的关系

一、视口 1、layout viewport（布局视口）　　一般移动设备的浏览器都默认设置了一个viewport 元标签，定义一个虚拟的layout viewport（布局视口），用于解决早期的页面在手机上显示的问题...iOS, Android基本都将这个视口分辨率设置为 980px，所以pc上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。...2、visual viewport（视觉视口）和物理像素 visual viewport（视觉视口）物理屏幕的可视区域，屏幕显示器的物理像素，同样尺寸的屏幕，像素密度大的设备，硬件像素会更多。...dip （设备逻辑像素）跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。...比如MacBook Pro的 Retina （视网膜）屏显示器硬件像素是：2880 * 1800。

1.7K5 0

iPhone屏幕尺寸、分辨率及适配

iPhone3GS时代，我们为一个应用提供图标（或按钮提供贴图），只需要icon.png。针对现在的iPhone4~6 Retina显示屏，需要制作额外的@2x高分辨率版本。...在实际运行时，系统如果发现当前设备是Retina屏（scale=2），会自动寻找”*@2x.png”命名格式的图片，加载针对Retina屏的图片素材，否则会失真。...)时，在逻辑上宽度不变高度稍高，之前旧的素材和布局通过AutoresizingFlexible简单适配即可运行得很好，但由于高宽比增大，上下两端出现黑粗边（典型如LaunchImage）。...从分辨率的角度来看，iPhone6沿用二倍图（@2x），但需为iPhone6+提供更高的三倍图（@3x）；从屏幕尺寸角度来看，需要重新对UI元素尺寸和布局进行适配，以期视觉协调。...假如交互按照iPhone5(s)下绝对标注，则在iPhone4(s)上可能挤出屏幕底部，而在iPhone6(+)上则可能横向偏左或纵向偏上。

6.1K2 0

iOS 7 Web App的初级优化之道

本文所涉及的内容大体上是作为《移动Web 开发中的一些前端知识收集汇总》的扩展，但只限于iOS7 系统，建议在阅读本文之前先看看该文以及《将你的网站打造成一个iOS Web App》、《iOS / Android...这个meta 标签上的尺寸设置兼容到这两个系统就好，然后考虑不同iOS 设备，下面给出了这个不错的代码： <!...Startup images 启动图片（ Startup images ）依旧考虑到系统及设备的兼容性，在老外那找到兼容性不错的代码，下次DeveMobile 与EaseMobile 主题更新就顺带更新下这几处地方...默认值为default（白色），其他可自定义black（黑色）和black-translucent（灰色半透明）。在实际中，取何值与启动图片（ Startup images ）相协调。...iOS 7.1 新添加的 minimal-ui iOS 7 的 Safari 在浏览网页，滚动之后，会触发隐藏 location bar 和 tool bar，进去全屏幕浏览的状态。

7347 0

html头部meta属性大全——各种奇葩属性设置大归类

--可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。--> Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 --> 的一个专有属性，它告诉IE8采用何种IE版本去渲染网页，在html的标签中使用。可以在微软官方文档获取更多介绍。...使用下面这段代码后，开发者无需考虑网页是否兼容IE8浏览器，只要确保网页在IE6、IE7下的表现就可以了。...-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 --><link rel="apple-touch-icon-precomposed" sizes

1.2K2 0

iOS Android 移动设备中的 Touch Icons

上次转载了一篇《将你的网站打造成一个iOS Web App》，但偶然发现这篇文章的内容有些是错误的——准确来说也不是错误，只是不适合自半年前来的情况了（也可以说是iOS7 之后的时间）——话说现在的的移动设备真是日新月异...浏览器的tab 前面的那个小图标，放入某个网站到收藏夹的时候也会看到，这个可以说是pc 互联网的产物了。而Touch icons 则是移动互联网的产物，用于手机、平板等移动设备上。...考虑到最大的兼容性，Chrome for Android 做了一定的牺牲，那就是，如果再你的网页上找不到上面的代码，就会向下兼容，跟随者苹果的设备支持的touch icons（类似一开头的代码）。..." sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"> 在apple 开发者官网中，为不同的apple 设备推荐了相应的size，...单独考虑apple 的设备，iphone 有无Retina 的，ipad有无Retina 的，ipadmini有无Retina 的皆要一一考虑，还有不同的iOS 版本…… 一句话，挺烦了，国外有人给出了下面的比较涵盖

2.2K6 0

iOS开发入门笔记

苹果公司还提供了一个软件，叫Interface Builder，简称IB，用于可视化的界面制作，就像用Dreamweaver做网页，或者像Visual Basic做桌面软件一样。...阅读应用代码从头新建一个应用：Hello World 其它代码里的控件尺寸 iOS App里的控件尺寸和字体大小都是指Point，Retina设备（iPhone 4，4S，5；the new Pad...）和非Retina设备（iPhone 3GS，iPad，iPad 2）的Point数是一样的，尽管iPhone 4的分辨率是3GS的2倍。...比如说，10point在Retina设备里是20 pixel，在非Retina设备（iPhone 3G）上则是10 pixel。项目成员间交流时，应使用Point，不要使用pixel。...iPhone 5与之前的iPhone不一样，采用了4寸Retina屏，所以它的Point数变成了320 * 568 points 开源代码 Apple官方的Sample Code 维基百科上的开源iOS

4K6 0

关于移动端适配，你必须要知道的

3.2 移动端开发在 iOS、 Android和 ReactNative开发中样式单位其实都使用的是设备独立像素。...为了适配所有机型，我们在写样式时需要把物理像素转换为设备独立像素：例如：如果给定一个元素的高度为 200px(这里的 px指物理像素，非 CSS像素)， iphone6的设备像素比为 2，我们给定的 height...3.4 关于屏幕这里多说两句 Retina屏幕，因为我在很多文章中看到对 Retina屏幕的误解。 Retina屏幕只是苹果提出的一个营销术语：在普通的使用距离下，人的肉眼无法分辨单个的像素点。...以 iPhone6为例：布局视口为 375px，则 1rem=37.5px，这时 UI给定一个元素的宽为 75px（设备独立像素），我们只需要将它设置为 75/37.5=2rem。...我们需要将顶部和底部合理的摆放在安全区域内， iOS11新增了两个 CSS函数 env、constant，用于设定安全区域与边界的距离。

1.9K4 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭