Submit Search
Upload
Mobile Web Optimization
•
3 likes
•
1,465 views
Ryan Chung
Follow
http://MobileDev.TW
Read less
Read more
Technology
News & Politics
Report
Share
Report
Share
1 of 57
Recommended
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
Du Yamin
淘宝移动端Web开发最佳实践
Html5移动网站开发实践
Html5移动网站开发实践
Web Zhao
Update: 这是2012年10月的分享,里面提供一些内容,现在可能已经过时或者有更好的替代方案。请谨慎参考。 --- wenbo --------------------------------------------------------- 使用HTML5开发移动网站的实践,包括HTML5的使用,响应式设计(responsive design),Retina屏幕优化,硬件加速,调试等。
APP Developer Program
APP Developer Program
Ryan Chung
歡迎參加資策會、中央大學、iOS Dev Club合辦的APP開發養成班,符合補助資格者,學費可享50% ~ 100%的折扣優惠!!瞭解更多:http://Mobiledev.TW/
Html5
Html5
cazhfe
it's my own ppt
Mobile Web Function Test
Mobile Web Function Test
Ryan Chung
http://MobileDev.TW
Real time web实时信息流推送
Real time web实时信息流推送
yongboy
Real-Time Web实时信息流推送
Real-Time Web实时信息流推送
yongboy
Real-Time Web实时信息流推送,培训材料
一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps
Adam Lu
Recommended
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
Du Yamin
淘宝移动端Web开发最佳实践
Html5移动网站开发实践
Html5移动网站开发实践
Web Zhao
Update: 这是2012年10月的分享,里面提供一些内容,现在可能已经过时或者有更好的替代方案。请谨慎参考。 --- wenbo --------------------------------------------------------- 使用HTML5开发移动网站的实践,包括HTML5的使用,响应式设计(responsive design),Retina屏幕优化,硬件加速,调试等。
APP Developer Program
APP Developer Program
Ryan Chung
歡迎參加資策會、中央大學、iOS Dev Club合辦的APP開發養成班,符合補助資格者,學費可享50% ~ 100%的折扣優惠!!瞭解更多:http://Mobiledev.TW/
Html5
Html5
cazhfe
it's my own ppt
Mobile Web Function Test
Mobile Web Function Test
Ryan Chung
http://MobileDev.TW
Real time web实时信息流推送
Real time web实时信息流推送
yongboy
Real-Time Web实时信息流推送
Real-Time Web实时信息流推送
yongboy
Real-Time Web实时信息流推送,培训材料
一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps
Adam Lu
移动端Web开发性能优化实践
移动端Web开发性能优化实践
Mingel Zhang
我在W3CTech北京站第30期的分享,主要是解决了工作中遇到的一些问题,并没有对问题做深入的讨论。有不足之处请大家指正。
How to ASP.NET MVC4
How to ASP.NET MVC4
Daniel Chou
原本對企業內部分享的資料,粗淺地介紹如何快速上手與體驗MVC4的優點。
非常靠谱 Html 5
非常靠谱 Html 5
Tony Deng
淘宝彩票移动项目开发实践
淘宝彩票移动项目开发实践
alvis-m
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
My own sweet home!
Appium手机自动化测试 testerhome_bqcon版本
Appium手机自动化测试 testerhome_bqcon版本
延胜 黄
testerhome.com 出品 在infoq上分享的版本
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
jay li
IDF2013大会分享——《使用新浪移动云开发全平台应用》
IDF2013大会分享——《使用新浪移动云开发全平台应用》
easychen
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
锐 张
前端性能测试
前端性能测试
tbmallf2e
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
Will Huang
後端工程師當了這麼多年,練就了一身功力,卻敵不過大環境的劇烈變遷。前端工程近幾年的的發展相當迅速,成為 Web 開發的主要角色。不過,這個情勢可能在不久的將來即將翻盤,因為 WebAssembly 的出現,讓後端開發者也能用熟悉的程式語言與框架,開發出即時互動的 SPA 網站應用程式。本次演說,將帶來 .NET 最新最夯的 Blazor 框架,讓你迅速了解如何利用 C#/Razor 與 HTML5 開發出優異的網站應用程式。 Modern Web 2018 👉 http://modernweb.tw/
淘宝移动端Web开发实践
淘宝移动端Web开发实践
完颜 小卓
Responsive Web UI Design
Responsive Web UI Design
jay li
珍珠奶茶会上的一次分享
美团前端架构简介
美团前端架构简介
pan weizeng
Blazor in NET 8 的重大改變___________________
Blazor in NET 8 的重大改變___________________
Gelis Wu
Agenda ● 初探 Blazor in .NET 8 ● 全新範本 Blazor United Project (Web App) - 統一所有 Blazor 開發的全新樣板 - 有那些東西不見了? ● Server-side Rendering 與 Streaming Rendering - WebApp 如何取代先前我提的 Hosted by Server? ● 如何將 Blazor in .NET 6/7 移轉至 .NET 8 - 案例介紹:將 .NET 6 的 BlazorApp 無痛移轉到 .NET 8 ● Blazor 元件開發者的注意事項 ● 商業應用開發:以 WebApp 一路打通 Full-Stack 全端開發
移动端跨平台技术原理
移动端跨平台技术原理
gorillazf
Android 4-app
Android 4-app
lydiafly
HTML5 生态系统和应用架构模型
HTML5 生态系统和应用架构模型
Tom Fan
twMVC#08 | 超。光速 網站最佳化實戰
twMVC#08 | 超。光速 網站最佳化實戰
twMVC
網頁最怕的就是卡卡獸來襲,本次主軸將與各位 Web 開發人員分享如何使用「工具」來達到網站優化的需求,利用工具的好處就是無須改變寫法與習慣,套上去就有效果,如此立竿見影的成效身為 .NET 的 Web 開發人員一起來聽聽吧。 注意事項:本課程不注重原理說明,主要圍繞在 .NET 周邊工具,如您不是 .NET 開發人員可能會有點茫然。
超。光速 網站最佳化實戰 -twMVC#8
超。光速 網站最佳化實戰 -twMVC#8
twMVC
講者:demo http://demo.tc (現任MVP、ASP.NET MVC4網站開發美學作者、twMVC核心講者) http://mvc.tw 簡介:網頁最怕的就是卡卡獸來襲,本次主軸將與各位 Web 開發人員分享如何使用「工具」來達到網站優化的需求,利用工具的好處就是無須改變寫法與習慣,套上去就有效果,如此立竿見影的成效身為 .NET 的 Web 開發人員一起來聽聽吧。 注意事項:本課程不注重原理說明,主要圍繞在 .NET 周邊工具,如您不是 .NET 開發人員可能會有點茫然。
Voice-First Games for Alexa
Voice-First Games for Alexa
Ryan Chung
Design Voice-First Games for Amazon Alexa
AI Service Integration - Education
AI Service Integration - Education
Ryan Chung
Talk about AI integration service and using in education.
More Related Content
Similar to Mobile Web Optimization
移动端Web开发性能优化实践
移动端Web开发性能优化实践
Mingel Zhang
我在W3CTech北京站第30期的分享,主要是解决了工作中遇到的一些问题,并没有对问题做深入的讨论。有不足之处请大家指正。
How to ASP.NET MVC4
How to ASP.NET MVC4
Daniel Chou
原本對企業內部分享的資料,粗淺地介紹如何快速上手與體驗MVC4的優點。
非常靠谱 Html 5
非常靠谱 Html 5
Tony Deng
淘宝彩票移动项目开发实践
淘宝彩票移动项目开发实践
alvis-m
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
My own sweet home!
Appium手机自动化测试 testerhome_bqcon版本
Appium手机自动化测试 testerhome_bqcon版本
延胜 黄
testerhome.com 出品 在infoq上分享的版本
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
jay li
IDF2013大会分享——《使用新浪移动云开发全平台应用》
IDF2013大会分享——《使用新浪移动云开发全平台应用》
easychen
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
锐 张
前端性能测试
前端性能测试
tbmallf2e
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
Will Huang
後端工程師當了這麼多年,練就了一身功力,卻敵不過大環境的劇烈變遷。前端工程近幾年的的發展相當迅速,成為 Web 開發的主要角色。不過,這個情勢可能在不久的將來即將翻盤,因為 WebAssembly 的出現,讓後端開發者也能用熟悉的程式語言與框架,開發出即時互動的 SPA 網站應用程式。本次演說,將帶來 .NET 最新最夯的 Blazor 框架,讓你迅速了解如何利用 C#/Razor 與 HTML5 開發出優異的網站應用程式。 Modern Web 2018 👉 http://modernweb.tw/
淘宝移动端Web开发实践
淘宝移动端Web开发实践
完颜 小卓
Responsive Web UI Design
Responsive Web UI Design
jay li
珍珠奶茶会上的一次分享
美团前端架构简介
美团前端架构简介
pan weizeng
Blazor in NET 8 的重大改變___________________
Blazor in NET 8 的重大改變___________________
Gelis Wu
Agenda ● 初探 Blazor in .NET 8 ● 全新範本 Blazor United Project (Web App) - 統一所有 Blazor 開發的全新樣板 - 有那些東西不見了? ● Server-side Rendering 與 Streaming Rendering - WebApp 如何取代先前我提的 Hosted by Server? ● 如何將 Blazor in .NET 6/7 移轉至 .NET 8 - 案例介紹:將 .NET 6 的 BlazorApp 無痛移轉到 .NET 8 ● Blazor 元件開發者的注意事項 ● 商業應用開發:以 WebApp 一路打通 Full-Stack 全端開發
移动端跨平台技术原理
移动端跨平台技术原理
gorillazf
Android 4-app
Android 4-app
lydiafly
HTML5 生态系统和应用架构模型
HTML5 生态系统和应用架构模型
Tom Fan
twMVC#08 | 超。光速 網站最佳化實戰
twMVC#08 | 超。光速 網站最佳化實戰
twMVC
網頁最怕的就是卡卡獸來襲,本次主軸將與各位 Web 開發人員分享如何使用「工具」來達到網站優化的需求,利用工具的好處就是無須改變寫法與習慣,套上去就有效果,如此立竿見影的成效身為 .NET 的 Web 開發人員一起來聽聽吧。 注意事項:本課程不注重原理說明,主要圍繞在 .NET 周邊工具,如您不是 .NET 開發人員可能會有點茫然。
超。光速 網站最佳化實戰 -twMVC#8
超。光速 網站最佳化實戰 -twMVC#8
twMVC
講者:demo http://demo.tc (現任MVP、ASP.NET MVC4網站開發美學作者、twMVC核心講者) http://mvc.tw 簡介:網頁最怕的就是卡卡獸來襲,本次主軸將與各位 Web 開發人員分享如何使用「工具」來達到網站優化的需求,利用工具的好處就是無須改變寫法與習慣,套上去就有效果,如此立竿見影的成效身為 .NET 的 Web 開發人員一起來聽聽吧。 注意事項:本課程不注重原理說明,主要圍繞在 .NET 周邊工具,如您不是 .NET 開發人員可能會有點茫然。
Similar to Mobile Web Optimization
(20)
移动端Web开发性能优化实践
移动端Web开发性能优化实践
How to ASP.NET MVC4
How to ASP.NET MVC4
非常靠谱 Html 5
非常靠谱 Html 5
淘宝彩票移动项目开发实践
淘宝彩票移动项目开发实践
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
Appium手机自动化测试 testerhome_bqcon版本
Appium手机自动化测试 testerhome_bqcon版本
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
IDF2013大会分享——《使用新浪移动云开发全平台应用》
IDF2013大会分享——《使用新浪移动云开发全平台应用》
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
前端性能测试
前端性能测试
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
淘宝移动端Web开发实践
淘宝移动端Web开发实践
Responsive Web UI Design
Responsive Web UI Design
美团前端架构简介
美团前端架构简介
Blazor in NET 8 的重大改變___________________
Blazor in NET 8 的重大改變___________________
移动端跨平台技术原理
移动端跨平台技术原理
Android 4-app
Android 4-app
HTML5 生态系统和应用架构模型
HTML5 生态系统和应用架构模型
twMVC#08 | 超。光速 網站最佳化實戰
twMVC#08 | 超。光速 網站最佳化實戰
超。光速 網站最佳化實戰 -twMVC#8
超。光速 網站最佳化實戰 -twMVC#8
More from Ryan Chung
Voice-First Games for Alexa
Voice-First Games for Alexa
Ryan Chung
Design Voice-First Games for Amazon Alexa
AI Service Integration - Education
AI Service Integration - Education
Ryan Chung
Talk about AI integration service and using in education.
AI Service Integration
AI Service Integration
Ryan Chung
AWS AI, MS AI
AI Adoption in the Enterprise
AI Adoption in the Enterprise
Ryan Chung
產業AI化調查
Intro to Dialogflow Chatbot Development
Intro to Dialogflow Chatbot Development
Ryan Chung
https://MobileDev.TW
AI in Classroom
AI in Classroom
Ryan Chung
How to use AI technology from Microsoft, AWS in classroom?
AWS re:Invent 2018 Recap
AWS re:Invent 2018 Recap
Ryan Chung
Focus on AI Services, DeepRacer & Alexa skill updates
MovieBot
MovieBot
Ryan Chung
Chatbot Development - Get Movie Intro
Service Integration Workshop
Service Integration Workshop
Ryan Chung
Dialogflow / Bot Framework / Custom Vision
MPP AI
MPP AI
Ryan Chung
Microsoft x III
Smart Home Intro Lab
Smart Home Intro Lab
Ryan Chung
http://MobileDev.TW
Introduction to DialogFlow
Introduction to DialogFlow
Ryan Chung
https://MobileDev.TW
Conversational AI Orientation
Conversational AI Orientation
Ryan Chung
https://mobiledev.tw
Udacity Meet Up - 0413
Udacity Meet Up - 0413
Ryan Chung
http://MobileDev.TW
Amazon Alexa Development Part II
Amazon Alexa Development Part II
Ryan Chung
http://MobileDev.TW
Amazon Alexa Development
Amazon Alexa Development
Ryan Chung
http://MobileDev.TW
Microsoft Professional Program - AI
Microsoft Professional Program - AI
Ryan Chung
http://MobileDev.TW
AI Service Integration
AI Service Integration
Ryan Chung
http://MobileDev.TW
Intro to AI
Intro to AI
Ryan Chung
http://MobileDev.TW
Hour of Code - Amazon Alexa
Hour of Code - Amazon Alexa
Ryan Chung
http://MobileDev.TW
More from Ryan Chung
(20)
Voice-First Games for Alexa
Voice-First Games for Alexa
AI Service Integration - Education
AI Service Integration - Education
AI Service Integration
AI Service Integration
AI Adoption in the Enterprise
AI Adoption in the Enterprise
Intro to Dialogflow Chatbot Development
Intro to Dialogflow Chatbot Development
AI in Classroom
AI in Classroom
AWS re:Invent 2018 Recap
AWS re:Invent 2018 Recap
MovieBot
MovieBot
Service Integration Workshop
Service Integration Workshop
MPP AI
MPP AI
Smart Home Intro Lab
Smart Home Intro Lab
Introduction to DialogFlow
Introduction to DialogFlow
Conversational AI Orientation
Conversational AI Orientation
Udacity Meet Up - 0413
Udacity Meet Up - 0413
Amazon Alexa Development Part II
Amazon Alexa Development Part II
Amazon Alexa Development
Amazon Alexa Development
Microsoft Professional Program - AI
Microsoft Professional Program - AI
AI Service Integration
AI Service Integration
Intro to AI
Intro to AI
Hour of Code - Amazon Alexa
Hour of Code - Amazon Alexa
Mobile Web Optimization
1.
MWeb 1 Mobile Web Optimization RyanChung@ncu.edu.tw http://MobileDev.TW
2.
MWeb 大綱 • 學習地圖 • 測試環境 •
行動網站最佳化 - Apple Safari Reference Library • 行動網站最佳化 – Google Webmasters http://MobileDev.TW2
3.
MWeb 學習地圖 http://MobileDev.TW3
4.
MWeb 測試環境 1. 主機+虛擬機 • Firefox •
Chrome • Opera • Safari • iOS Simulator • MAC + iOS SDK • Android Emulator • Android SDK • /tools/android指令開啓 2. 主機+實機 • 無線網路 • 主機Web Server • iPhone實機 • iOS Safari • Android實機 • Android Browser 3. Editor • NotePad++ • TextWrangler • Aptana 4
5.
MWeb 測試環境 II http://MobileDev.TW5
6.
MWeb 測試環境 III http://MobileDev.TW6
7.
MWeb 網站最佳化 For iPhone Safari
Reference Library http://MobileDev.TW7
8.
MWeb 指定專屬CSS • 指定專屬的CSS給iPhone與iPod Touch使用 <link
media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet”> • 其他裝置使用的CSS <link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet”> http://MobileDev.TW8
9.
MWeb Layout and Metrics
on iPhone and iPod touch http://MobileDev.TW9
10.
MWeb iOS7 Mobile Safari http://MobileDev.TW10
11.
MWeb Retina & iPhone5 •
iPhone/iPod Touch 1~3 • 320 x 480 • iPhone 4 Retina • 640 x 960 • iPhone 5 • 640 x 1136 • 1136 = 960 + 176 http://MobileDev.TW11
12.
MWeb iPhone & iPad http://MobileDev.TW12
13.
MWeb Viewport 桌面瀏覽器 網頁的可視區域 http://MobileDev.TW13 行動瀏覽器 網頁的內容區域
14.
MWeb Viewport scale 設定的差異 http://MobileDev.TW14 1-1.html 圖片大小:200px
* 200px Viewport:無設定
15.
MWeb Viewport scale 設定的差異 http://MobileDev.TW15 1-2.html 圖片大小:200px
* 200px Viewport:initial-scale=1.0 <meta name = "viewport" content = "initial-scale = 1.0">
16.
MWeb Viewport scale 設定的差異 http://MobileDev.TW16 1-3.html 圖片大小:200px
* 200px Viewport:initial-scale=1.5 <meta name = "viewport" content = "initial-scale = 1.5">
17.
MWeb Viewport scale 設定的差異 http://MobileDev.TW17 2-1.html Viewport:無設定
18.
MWeb Viewport scale 設定的差異 http://MobileDev.TW18 2-2.html Viewport:initial-scale=1.0 <meta
name = "viewport" content = "initial-scale = 1.0">
19.
MWeb Viewport scale 設定的差異 http://MobileDev.TW19 2-3.html Viewport:initial-scale=1.5 <meta
name = "viewport" content = "initial-scale = 1.5">
20.
MWeb Viewport 與裝置方向 只設定initial scale為1.0時,Safari會自動調整viewport的寬度與高度。 (橫向與直向不同) http://MobileDev.TW20
21.
MWeb Viewport Width the viewport
width is set to 320 on iPhone. http://MobileDev.TW21 <meta name = "viewport" content = "width=320px">
22.
MWeb 放大效果 the viewport width
is set to 200 pixels on iPhone. http://MobileDev.TW22
23.
MWeb Web App Viewport <meta
name = "viewport" content = "width=device-width"> http://MobileDev.TW23
24.
MWeb 透過CSS來調整網頁 http://MobileDev.TW24
25.
MWeb -webkit-text-size-adjust http://MobileDev.TW25 無設定 150% 200% p{-webkit-text-size-adjust:200%}
26.
MWeb -webkit-tap-highlight-color 改變點選時的顏色 http://MobileDev.TW26 -webkit-tap-highlight-color:rgba(200,0,0,0.4)
27.
MWeb 表單處理 • 須考量當鍵盤出現與否,使用者看到的畫面 • 透過CSS來改變表單的樣式 •
自動校正與首字大寫控制 http://MobileDev.TW27
28.
MWeb 須考慮虛擬鍵盤的大小 http://MobileDev.TW28
29.
MWeb 尺寸 http://MobileDev.TW29
30.
MWeb 客製化選項 http://MobileDev.TW30
31.
MWeb 客製化選項 http://MobileDev.TW31
32.
MWeb 客製化選項 http://MobileDev.TW32
33.
MWeb 自動校正與首字大寫 一般文字輸入欄位Safari會預設開啓自動校正與首字大寫的 功能,帳號輸入欄位應設定為關閉。 <input type="text" name="field1"
autocorrect = "off"/> <input type="text" name="last-name" autocapitalize="off"/> http://MobileDev.TW33
34.
MWeb Web App 設定 http://MobileDev.TW34
35.
MWeb 指定桌面圖示(Web Clip) • 全網站使用 •
直接在網站根目錄放 apple-touch-icon.png 或 apple-touch-icon-precomposed.png (Safari不會做任何加工) • 單一頁面使用(會取代全網站使用的圖示) <link rel="apple-touch-icon" href="/custom_icon.png"/> <link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/> (第二個Safari不會做任何加工) iOS7之後,都不加工 • 提供不同裝置解析度使用 <link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" /> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" /> http://MobileDev.TW35 120x12076x76 152x152
36.
MWeb 啓動圖片(Startup Image) <link rel="apple-touch-startup-image"
href="/startup.png"> <meta name="apple-mobile-web-app-capable" content="yes" > 建議大小: 320 x 480 640 x 960 (Retina) 640 x 1136 (iPhone5) http://MobileDev.TW36
37.
MWeb 全螢幕顯示 • 隱藏網址列與下方網頁工具列 <meta name="apple-mobile-web-app-capable"
content="yes" /> • 改變最上方狀態列 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="translucent black" /> http://MobileDev.TW37
38.
MWeb 外部連結 • 用內建Mail軟體寄信 • <a
href="mailto:frank@wwdcdemo.example.com">John Frank</a> • 打電話(iPhone)/加入連絡人(iPod Touch) • <a href="tel:0800-000-080">Call now</a> • FaceTime • <a href="facetime:user@example.com">Connect using FaceTime</a> • 送簡訊 • <a href="sms:886-988-988-988">New SMS Message</a> • 打開內建地圖,搜尋特定位置 • <a href="http://maps.apple.com/?q=cupertino">Cupertino</a> • 看Youtube • <a class="noeffect" href="http://www.youtube.com/yourvideo">Watch</a> • 開iTune或Appstore看特定項目 • <a class="noeffect" href="http://itunes.apple.com/us/app/zinio-magazine -newsstand-reader/id364297166?mt=8">Open App</a> http://MobileDev.TW38 出去就回不來了…….
39.
MWeb Building Mobile-Optimized Website Google
Developer Site - Webmasters http://MobileDev.TW39
40.
MWeb 三種做法 • 轉向 • 相同URL,但是依據不同裝置直接給予不同的HTML •
直接分開 • 直接分成桌面端的URL與行動端的URL • RWD • 相同URL,相同HTML,但依據不同裝置使用不同CSS http://MobileDev.TW40
41.
MWeb 轉向 首頁 (純判斷) 行動版 首頁 桌面版 首頁 http://MobileDev.TW41
42.
MWeb Responsive Web Design http://MobileDev.TW42 Source:http://en.wikipedia.org/wiki/Responsive_web_design
43.
MWeb RWD 主要學習重點 • CSS3
Media Query • 偵測瀏覽器環境來決定使用哪一個CSS • 彈性版面配置 • 非固定的版面安排 • 彈性多媒體設定 • 自動按比例縮放的多媒體設定 http://MobileDev.TW43
44.
MWeb Media Query 透過不同的螢幕大小,給予使用不同的CSS http://MobileDev.TW44
45.
MWeb Media Type • all •
braille • 盲人點字裝置 • embossed • 盲人點字列印 • handheld • 小螢幕、手持式裝置 • print • 列印預覽 • projection • 演講投影用 • screen • 電腦螢幕 • speech • 聽覺形態 • tty • 終端機 • tv • 電視類型 http://MobileDev.TW45
46.
MWeb 目標族群 • 手機橫向、平板直立、小螢幕桌面 @media screen
and (min-width:480px) and (max-width:800px) • 手機直向 @media screen and (max-width:479px) http://MobileDev.TW46
47.
MWeb 區分直向橫向 • 橫向 @media all
and (orientation: landscape) • 直向 @media all and (orientation: portrait) http://MobileDev.TW47
48.
MWeb Google 目前設計 • 螢幕解析度1024pixel以上 •
螢幕解析度 480 ~ 800 • @media screen and (max-width:800px){ … } • 螢幕解析度480以下 • @media screen and (max-width:479px){ … } http://MobileDev.TW48
49.
MWeb 直接寫在一起,可動態改變 http://MobileDev.TW49
50.
MWeb 直接寫在一起,可動態改變 http://MobileDev.TW50
51.
MWeb Lab.三個欄位的變化 http://MobileDev.TW51
52.
MWeb 開發宗旨 • 在任何的螢幕解析度下,都能讓內容易讀 • 維護一份內容,但設法使其能在各種裝置下可讀 •
不論視窗大小,避免出現橫向的捲軸 http://MobileDev.TW52
53.
MWeb 套用在圖片上的CSS img { max-width:100%} http://MobileDev.TW53
54.
MWeb 套用在圖片上的CSS img { max-width:100%} http://MobileDev.TW54
55.
MWeb Viewport Default Viewport • Android:800px •
iOS:980px http://MobileDev.TW55
56.
MWeb 基本設定 http://MobileDev.TW56
57.
MWeb Viewport http://MobileDev.TW57