建立僅在iPad和Android平板電腦上運行的網站？

我擁有HTML5動畫內容，我想在iPad和Android平板電腦的瀏覽器中查看。建立僅在iPad和Android平板電腦上運行的網站？

我已經爲iPads（Safari）做了一個版本，它已經很棒了。

我最好設計幾種不同的網站佈局和屏幕尺寸（視口愚蠢），還是有可能設計一個網站，使內容適應不同的瀏覽器，屏幕&視口尺寸？

有沒有在線教程&這個資源？

感謝

來源

2013-03-09 Donelson

最好的做法是

檢查通過用戶代理字符串嗅探瀏覽器的能力，而不是（品牌）。
就像您所說的那樣，您可以設計最多的「一個網站，使內容適應不同的瀏覽器，屏幕&」。說起來容易做起來難，但是前進的道路......
通過應用對目標受衆有意義的修復來管理你不能這樣做的方式。（如IE條件註釋，這可能不適用於iOS或Android，但爲什麼停在那裏:)

有很多資源可以找到。搜索以下關鍵字。「CSS Media Queries」，「Fluid layout」，「Responsive Design」，...

來源

2013-03-09 16:36:54 raybiss

非常感謝。 – Donelson 2013-03-09 20:49:58

您應該總是嘗試製作流體/液體網站佈局（基於屏幕寬度/高度的百分比）屏幕尺寸。

如果此「動畫內容」具有固定大小的元素，您可能會在兩側添加一些黑條以補償Android平板電腦上的這種情況。

一些前端框架如Bootstrap可以爲您處理所有流動性。

來源

2013-03-09 16:38:11

Bootstrap看起來很有趣;不知道現在是否超出了我的知識/技能水平。我會聯繫他們獲取更多信息，謝謝。 – Donelson 2013-03-09 20:15:50

是的，有固定大小的動畫幀...（源大小2000 x 600現在）但是*哪些*大小選擇這些幀取決於我。顯然，爲不同屏幕選擇最佳尺寸會很好，只要我知道如何挑選這些尺寸！ – Donelson 2013-03-09 20:29:54

你可以使用jQuery/Javascript來捕獲瀏覽器的寬度/高度。我不知道你對這些事情有多少經驗。 http://api.jquery.com/height/ – 2013-03-09 20:37:12

HTML5媒體查詢將允許您隱藏和顯示不同視口等內容，因此保持相同的HTML源代碼，但通過鏈接各種CSS樣式表來調整其視覺上的adderance。我傾向於使用：

<!-- MOBILE DEVICES --> 
<link href="CSS/basic.css" rel="stylesheet" media="screen and (max-device-width: 767px)" /> 
<!--ANDROID MOBILE FIX--> 
<link href="CSS/basic.css" rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" /> 
<!-- TABLET DEVICES --> 
<link href="CSS/tablet.css" rel="stylesheet" media="screen and (min-device-width: 768px) and (max-device-width: 1024px)" /> 
<!--DESKTOP DEVICES --> 
<link href="CSS/desktop.css" rel="stylesheet" media="screen and (min-device-width: 1025px)" />

這裏是一個CSS3 media queries tutorial

來源

2013-03-09 16:49:43

對不起，但「CSS/basic.css」等是哪裏？謝謝你的幫助！ – Donelson 2013-03-09 20:27:26

這些文件將是您爲每個設備類型單獨開發的特定css文件，如果你走了那條路線。可以將此技術想象爲「具有設備相關CSS的條件解析的單個Web佈局」。在您的模板中使用媒體查詢可以幫助您爲較小的設備選擇適當的圖形圖像/腳本/字體。 Tim Kadlec撰寫的關於這些技術的優秀資源是實現響應式網頁設計。 – 2013-03-09 21:18:28

這取決於您可以在那裏編輯位置，例如href =「CSS/basic.css」這僅僅意味着你有一個名爲CSS的文件夾，並且在該文件夾中有一個名爲basic.css的文件，這樣做的好處在於，對於所有窗口大小，網頁將顯示相同臺式電腦，並且在您調整瀏覽器大小時不會更改，只需更改設備即可在平板電腦或手機等瀏覽網站 – 2013-03-09 21:23:16

建立僅在iPad和Android平板電腦上運行的網站？

回答

相關問題