优化Safari上Web内容的显示与性能指南

需积分: 7 12 浏览量更新于2024-07-27 收藏 5.96MB PDF 举报

"SafariWebContent" 是一份关于如何优化网页内容在Safari浏览器及iOS设备上展示和性能表现的文档。适用于希望创建针对iOS平台的特定网页内容、使用iOS专用样式表或集成原生应用链接的开发者。特别是针对构建自定义web应用程序的人员。文档可能涵盖了以下几个关键知识点： 1. **用户界面体验**：为了确保在桌面和iOS设备上提供良好的用户体验，开发者需要了解如何适应不同屏幕尺寸、触摸交互和设备特性。这可能包括响应式设计、手势识别和优化滚动性能。 2. **HTML5兼容性**：Safari作为一款支持HTML5的浏览器，开发者应熟悉HTML5的新特性和API，如离线存储、媒体元素、Geolocation、Web Workers和Web Storage等，并确保在Safari上的正确运行。 3. **iOS特定的Web内容**：文档可能提供了关于如何编写专为iOS设备优化的代码，例如利用WebKit框架的功能，或者利用CSS3媒体查询来针对不同分辨率的iOS设备进行样式调整。 4. **iOS样式表**：Safari支持一些iOS特有的CSS扩展，如 `-webkit` 前缀的属性，用于实现如圆角、阴影、渐变等效果。开发者需要了解这些扩展并适当地应用到设计中。 5. **iOS原生应用链接**：文档可能会讲解如何通过`smart banners`或者`Universal Links`将网页内容与iOS应用关联，使得用户可以直接从网页打开应用，提高用户体验。 6. **版权和许可**：文档强调了对苹果知识产权的尊重，任何复制、存储或传播内容需遵守苹果的版权规定，但允许个人用途的存储和打印。 7. **技术授权**：虽然文档是为了帮助开发者开发应用于苹果设备的应用，但它明确指出未授予任何技术的明示或暗示许可，表明所有知识产权归苹果公司所有。 8. **Apple相关服务和品牌**：提到的iAd是苹果的广告服务，而iPhone、iPod和iPod touch是苹果的知名产品，文档可能也包含了如何在Safari中集成这些服务的相关信息。这份文档为想要在Safari和iOS平台上提供优质网络体验的开发者提供了宝贵的指南，涵盖了从基础的HTML5语法到iOS特定功能的全面指导。

Refer to Safari reference documents, such as Safari HTML Reference and Safari CSS Reference, for availability

of features on specific platforms.

Follow Good Web Design Practices

You should follow well-established rules of good web design. This section covers a few basic rules that are

critical for Safari. Read Web Page Development: Best Practices for more general advice on designing webpages.

● Add a DOCTYPE declaration to your HTML files.

Preface your HTML files with a DOCTYPE declaration, which tells browsers which specification to parse

your webpage against. See “HTML Basics” (page 95) for how to do this.

● Separate your HTML, CSS, and JavaScript into different files.

Your webpages are more maintainable if you separate page content into distinct files for mark-up,

presentation, and interaction.

● Use well-structured HTML.

You increase cross-platform browser compatibility by running your HTML files through a validator. You

should fix common problems such as missing quotes, missing close tags, incorrect nesting, incorrect

case, and malformed doctype. See http://validator.w3.org or use the validator provided by your web

development tools.

● Be browser independent.

Avoid using the user agent string to check which browser is currently running. Instead, read Object De-

tection to learn how to determine if a browser supports a particular object, property, or method, and

read Detecting WebKit with JavaScript to learn how to detect specific WebKit versions. Also use the W3C

standard way of accessing page objects—that is, use getElementByID("elementName"). Only as a

last resort, use the user agent string as described in “Using the Safari User Agent String” (page 31) to

detect Safari on iOS.

Read “HTML Basics” (page 95) and “CSS Basics” (page 101) for how to write structured HTML and add CSS to

existing HTML.

Use Security Features

Safari on all platforms uses the same SSL implementation to provide end-to-end security. The same encryption

that prevents listening on the wire is just as secure when used in a wireless situation, whether through Wi-Fi,

3G, or EDGE. Specifically, Safari supports:

● SSL 2, SSL 3, and TLS with many popular cipher suites

● RSA keys up to 4096

● HTTPS

Follow Good Web Design Practices

CHAPTER 1

Creating Compatible Web Content

Know iOS Resource Limits

Your webpage performing well on the desktop is no guarantee that it will perform well on iOS. Keep in mind

that iOS uses EDGE (lower bandwidth, higher latency), 3G (higher bandwidth, higher latency), and Wi-Fi

(higher bandwidth, lower latency) to connect to the Internet. Therefore, you need to minimize the size of

your webpage. Including unused or unnecessary images, CSS, and JavaScript in your webpages adversely

affects your site’s performance on iOS.

Because of the memory available on iOS, there are limits on the number of resources it can process:

● The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256

MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.

That is, ensure that width * height ≤ 3 * 1024 * 1024 for devices with less than 256 MB RAM.

Note that the decoded size is far larger than the encoded size of an image.

● The maximum decoded image size for JPEG is 32 megapixels using subsampling.

JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to decode to

a size that has one sixteenth the number of pixels. JPEG images larger than 2 megapixels are

subsampled—that is, decoded to a reduced size. JPEG subsampling allows the user to view images from

the latest digital cameras.

● The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5

megapixels for devices with greater or equal than 256 MB RAM.

The height and width of a canvas object is 150 x 300 pixels if not specified.

● JavaScript execution time is limited to 10 seconds for each top-level entry point.

If your script executes for more than 10 seconds, Safari on iOS stops executing the script at a random

place in your code, so unintended consequences may result.

This limit is imposed because JavaScript execution may cause the main thread to block, so when scripts

are running, the user is not able to interact with the webpage.

Read “Debugging” (page 89) for how to debug JavaScript on iOS.

● The maximum number of documents that can be open at once is eight on iPhone and nine on iPad.

iOS Note: In iOS 1.1.4 and earlier, the JavaScript execution time was limited to 5 seconds and the size of

allocations to 10 MB. Also, the limit on the size of canvas elements was the same as Safari on the desktop.

In iOS 2.2.1 and earlier, the sum of all of the frames needs to be less than 2 megapixels—that is, width *

height * number of frames ≤ 2 * 1024 * 1024. In iOS 3.0 and later, the limit only applies to one

frame at a time.

You also need to size images appropriately. Don’t rely on browser scaling. For example, don’t put a 100 x

100 image in a 10 x 10 <img> element. Tile small backgrounds images; don’t use large background images.

Know iOS Resource Limits 19

CHAPTER 1

Creating Compatible Web Content

剩余105页未读，继续阅读

guanjunz

粉丝: 0

优化Safari上Web内容的显示与性能指南

JavaScript实现触屏滑动事件

使用flask+bootstrap+python+mysql制作的简易库存管理系统

发动机排气制动制动力矩仿真研究：仿真模型构建、结果解析与相关计算公式探究,发动机排气制动制动力矩仿真技术研究：深入解析仿真模型、结果与相关计算公式,发动机排气制动制动力矩仿真 仿真模型 仿真结果 相关

java项目之进销存管理系统源码.zip

2025年及以后的主要战略技术趋势和重大战略预测报告

基于MATLAB的深度学习人脸识别图形界面系统,基于MATLAB的人脸识别图形用户界面(GUI)设计与实现,基于MATLAB的人脸识别gui ,基于MATLAB; 人脸识别; GUI,基于MATLAB

中轴.zip

FRP Manager-V1.19.2

文昌101工位火箭转运平台.zip

uni-app小程序开发 基础知识2 后端代码

最新资源

发动机排气制动制动力矩仿真研究：仿真模型构建、结果解析与相关计算公式探究,发动机排气制动制动力矩仿真技术研究：深入解析仿真模型、结果与相关计算公式,发动机排气制动制动力矩仿真仿真模型仿真结果相关

uni-app小程序开发基础知识2 后端代码