美女视频app免费软件下载,美女视频在线观看网,日本美女视频在线观看

【IT168 技術(shù)】如果你是一名Web開發(fā)人員，你可能會認(rèn)為查看源代碼和創(chuàng)建一個可以在iPhone上運行的站點或應(yīng)用程序是最煩惱的。本文就介紹一些iPhone開發(fā)的技巧和忠告，如果你尚未購買iPhone真機，你可以使用模擬器進行練習(xí)。

　　1. 文檔和iPhone模擬器

　　當(dāng)Peter-Paul Koch在iPhone上玩Safari時他宣傳“文檔?沒有”，至那以后情況開始逐漸改變，蘋果公司現(xiàn)在已經(jīng)將與iPhone有關(guān)的Web開發(fā)信息都放到Safari文檔中了。

　　iPhone SDK(軟件開發(fā)工具包)包含了一個iPhone模擬器，如果你已經(jīng)擁有一部iPhone那這會很方便，當(dāng)然如果你加入了iPhone大軍，這是必不可少的了，如果想要使用它，必須先注冊成為一名iPhone開發(fā)人員，并安裝iPhone SDK，安裝好后可以在/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications找到iPhone模擬器。

　2. 小屏幕CSS

　　iPhone和PC或Mac機最大的不同就是它的屏幕更小，如你的頁面可以在桌面瀏覽器和屏幕閱讀程序中運行，最簡單的辦法是為iPhone編寫?yīng)毩⒌臉邮奖恚旅媸且褂玫降臉?biāo)記：

<link
   rel="stylesheet"
   href="small-screen.css"
   type="text/css"
   media="only screen and (max-device-width: 480px)"
/>

　　這里的link單元使用了media查詢目標(biāo)設(shè)備，最大寬度設(shè)為480像素，也就是iPhone在橫向時可用的寬度，對于IE 5.5或更早的版本需要使用IE附加條件的注釋，這些版本都缺乏media查詢支持，將為iPhone載入樣式表，我們還是以一個例子進行說明。

　　在例1中(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/small-screen-css.html)，我們將看到在iPhone瀏覽器上顯示一個紅框的頁面，在其它瀏覽器上就顯示藍色。common.css文件包括了所有瀏覽器的樣式，其內(nèi)容如下：

　　#test-block {

　　background: blue;

　　color: white;

　　font-family: Verdana;

　　padding: 10px;

　　width: 300px;

　　height: 100px;

　　}

　　從上面的代碼可以看出其定義了藍色框。另一個small-screen.css文件是為所有小屏幕設(shè)備定義的樣式，其內(nèi)容如下：

　　#test-block {

　　background: red;

　　}

　　它定義了紅色的背景。

　　如果你只愿意定義一個樣式表，你可以使用@media塊向主樣式表中只添加iPhone樣式表即可，如：

　　@media only screen and (max-device-width: 480px) {

　　#test-block {

　　background: red;

　　}

　　}

　　在例2(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/small-screen-css-inline.html)中我們可以看到一個內(nèi)聯(lián)樣式表，在它使用的樣式表文件onestyleforall.css中，你可以看到在@media塊中為紅色背景進行了聲明。

　　默認(rèn)情況下，iPhone上的Safari會象在大屏幕的桌面瀏覽器那樣顯示你的頁面，寬度達到了980像素，然后縮小內(nèi)容以適應(yīng)iPhone的小屏幕，因此用戶在iPhone看這個頁面時感覺字體就比較小了，也比較模糊，必須要放大才能看得真切，對于一個普通的Web頁面似乎可以接受，但對于一個常用的應(yīng)用程序就沒幾個人能夠受得了。

　　幸運的是可以使用特殊的Meta元素可視區(qū)進行糾正：

　　這個元素通知瀏覽器使用設(shè)備的寬度作為可視區(qū)的寬度，而不是默認(rèn)的980像素了，我們可以看看兩個不同的例子。

　　例3(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/no-viewport.html)顯示了一個簡單的段落元素，沒有Meta元素可視區(qū)，字體有點模糊。在iPhone中運行的實際情況如下圖所示。

圖 1 無可視區(qū)的顯示效果

　　例4(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/viewport.html)包括了一個可視區(qū)元素，現(xiàn)在設(shè)備寬度只有320像素，字體也比前一個例子更清晰了。在iPhone中運行的實際情況如下圖所示。

圖 2 有可視區(qū)的顯示效果

　　另外，你還可以手動設(shè)置device-width的值，例如，假設(shè)你的博客頁面的寬度是750像素，那么桌面屏幕最佳大小就是800x600像素，例5(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/fixed750.html)顯示了一個刪減版本，如果你在iPhone中瀏覽它，你會看到980像素剩下的空間都填充了白色。

　　為了消除額外的空間，可以使用meta元素可視區(qū)將寬度設(shè)為780像素：

　　例6(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/fixed750-viewport.html)顯示了meta元素可視區(qū)布局被固定后的效果。

　　Meta元素可視區(qū)的內(nèi)容可以包括多個逗號分隔的值，如initial-scale – 用戶最初看到頁面時的放大級別，對于Web應(yīng)用程序，一個常見的設(shè)置是：

　　這個元素設(shè)置寬度為設(shè)備的最大寬度，禁止用戶放大和縮小。

　4. 方向變化

　　你的頁面和應(yīng)用程序可以在兩個方向上查看：縱向和橫向。如果你的應(yīng)用程序可以根據(jù)不同的方向進行變化，那將非常的酷。

　　使用Javascript可以獲得window.orientation的屬性，它包含以下值：

　　l 0 – 正常的縱向方向(開始按鈕在下方)

　　l -90 – 從縱向順時針旋轉(zhuǎn)后的水平方向(開始按鈕在左方)

　　l 90 – 從縱向逆時針旋轉(zhuǎn)后的水平方向(開始按鈕在右方)

　　l 180 – 目前還不支持，但應(yīng)該是縱向旋轉(zhuǎn)(開始按鈕在上方)

　　當(dāng)用戶傾斜設(shè)備時，你可以使用orientationchange事件來執(zhí)行一個動作，下面是一個簡單的例子，無論何時當(dāng)方向發(fā)生變化時彈出一個警告提示，顯示window.orientation的值：

　　window.onorientationchange = function() {

　　alert(window.orientation);

　　}

　　可以在例7(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/orientation-change.html)中看到它是如何工作的，旋轉(zhuǎn)電話時就會看到警告，在iPhone模擬器中，在硬件菜單下可以看到旋轉(zhuǎn)選項，如下圖所示。

圖 3 旋轉(zhuǎn)設(shè)備時彈出警告信息

5. 特定方向樣式

　　有時你可能需要依靠方向使用樣式格式化你的內(nèi)容，需要三個簡單的步驟：

　　1. 在我們的標(biāo)記中，給body單元添加一個類名(可以使用portrait和landscape)

　　2. 在我們的樣式表中，為body.portrait和body.landscape指定不同的內(nèi)容樣式，以及需要它的子元素

　　3. 當(dāng)方向變化時使用Javascript更新body單元的class屬性的值

　　因此第一步是增加一個默認(rèn)的類名，如：

body.portrait p {
color: red;
}

body.landscape p {
color: blue;
}

　　然后添加樣式：

　　body.portrait p {

　　color: red;

　　}

　　body.landscape p {

　　color: blue;

　　}

　　最后是Javascript，我們需要使用：

　　1. 一個load事件監(jiān)聽器，設(shè)置最初的類名

　　2. 一個orientationchange事件監(jiān)聽器

　　3. 一個發(fā)生orientationchange事件時交換類名的函數(shù)

　　我們來看看事件監(jiān)聽器：

　　window.addEventListener('load', setOrientation, false);

　　window.addEventListener('orientationchange', setOrientation, false);

　　下面是改變body單元上類名的setOrientation函數(shù)：

　　function setOrientation() {

　　var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';

　　var cl = document.body.className;

　　cl = cl.replace(/portrait|landscape/, orient);

　　document.body.className = cl;

　　}

　　例8(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/orientation-styles.html)顯示了這些特定方向的樣式。使用iPhone瀏覽這個地址的效果如下圖所示。

圖 4 特定方向的樣式

　6. 隱藏工具欄

　　你可能已經(jīng)注意到在iPhone上第一次載入某個頁面時，URL工具欄是可見的，但往下滾動頁面時，ULR工具欄就消失了。

圖 5 有URL工具欄

　　如果你想讓你的Web應(yīng)用程序看起來更象一個本地iPhone應(yīng)用程序，可能會想到在頁面載入時移除掉工具欄，實現(xiàn)起來其實很簡單，只需要使頁面向下滾動1個像素即可，如：

　　window.addEventListener('load', function(){

　　setTimeout(scrollTo, 0, 0, 1);

　　}, false);

　　例子9(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/hide-toolbars.html)顯示了這個行為。使用iPhone瀏覽這個地址的效果如下圖所示。

圖 6 無ULR工具欄

　　如果你也的頁面太短不能滾動怎么辦?這個時候我們需要添加一個額外的meta元素，以便讓頁面可以滾動，使用meta元素設(shè)置可視區(qū)的高度：　　

7. 圓角

　　你可以使用你熟悉的桌面瀏覽器中的圓角方法，如果你的目標(biāo)只有Safari，那還可以使用-webkit-border-radius CSS擴展，對于Firefox 有一個類似的-moz-border-radius，但在IE和Opera中會顯示為一個簡單的方框。

　　.box {

　　-webkit-border-radius: 5px;

　　-moz-border-radius: 5px;

　　background: #ddd;

　　border: 1px solid #aaa;

　　}

　　例10(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/rounded.html)顯示了div元素上的圓角。使用iPhone瀏覽這個地址的效果如下圖所示。

圖 7 圓角效果

8. 觸摸事件

　　當(dāng)然，在使用iPhone時你可以使用手指代替鼠標(biāo)，最酷的是支持多點觸摸，在iPhone上鼠標(biāo)事件被觸摸事件替代了，包括：

　　l touchstart

　　l touchend

　　l touchmove

　　l touchcancel

　　當(dāng)你發(fā)出這些事件時，事件監(jiān)聽器將會接收一個event對象，event對象有些重要的熟悉，如：

　　l touches – 觸摸對象的集合，觸摸屏幕的每個手指一個，touch對象有pageX和pageY屬性，包含了在頁面上觸摸的坐標(biāo)。

　　l targetTouches – 和touches類似，但它只登記對目標(biāo)元素的觸摸，而不是整個頁面。

　　下面的例子是拖放的一個簡單實現(xiàn)，我們在空白頁面上放一個方框，然后進行拖動，你需要的做的就是訂閱touchmove事件，然后隨手指移動更新方框的位置，如：

　　window.addEventListener('load', function() {

　　var b = document.getElementById('box'),

　　xbox = b.offsetWidth / 2, // half the box width

　　ybox = b.offsetHeight / 2, // half the box height

　　bstyle = b.style; // cached access to the style object

　　b.addEventListener('touchmove', function(event) {

　　event.preventDefault(); // the default behaviour is scrolling

　　bstyle.left = event.targetTouches[0].pageX - xbox + 'px';

　　bstyle.top = event.targetTouches[0].pageY - ybox + 'px';

　　}, false);

　　}, false);

　　Touchmove事件監(jiān)聽器首先取消手指移動的默認(rèn)行為，event.targetTouches集合包括一列每個手指所在的當(dāng)前div元素的數(shù)據(jù)，我們只需要關(guān)心一個手指，因此我們使用event.targetTouches[0]，pageX向我們提供了手指的X坐標(biāo)，根據(jù)這個值減去div寬度的一半，以便手指保留在方框中的中間。

　　在例11(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/drag.html)中我們將所有代碼集中到一起了。

　9. 手勢

　　在iPhone上，手勢是兩個手指的行為：縮放(放大和縮小)和旋轉(zhuǎn)。前面我們已經(jīng)學(xué)習(xí)了touches和targetTouches事件包含了每個手指觸摸設(shè)備的信息，使用這些事件也處理手勢，如放大和平移，但還有更方便的gesture事件可用，你可以監(jiān)聽下面的事件：

　　l gesturestart

　　l gestureend

　　l gesturechange

　　在接下來的例子中我們將監(jiān)聽gesturechange事件，然后使用webkitTransform樣式屬性縮放和旋轉(zhuǎn)一個div，像往常一樣，事件監(jiān)聽器接收event對象參數(shù)，event對象包含以下屬性：

　　l event.scale – 不縮放時值為1，縮小時值小于1，放大時值大于1

　　l event.rotate – 旋轉(zhuǎn)的角度

　　代碼和前面的觸摸—拖動代碼非常類似：

　　window.addEventListener('load', function() {

　　var b = document.getElementById('box'),

　　bstyle = b.style;

　　b.addEventListener('gesturechange', function(event) {

　　event.preventDefault();

　　bstyle.webkitTransform = 'scale(' + event.scale + ') ' +

　　'rotate('+ event.rotation + 'deg)';

　　}, false);

　　}, false);

　　例12(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/gesture.html)顯示了運行這段代碼的效果，縮放和旋轉(zhuǎn)一個div。如果你在iPhone模擬器中瀏覽，按住選項鍵，將會顯示兩個灰色的點，表示兩個手指，當(dāng)你拖動鼠標(biāo)時，可以將圓點移進和移出。

圖 8 縮放和旋轉(zhuǎn)

10. 特殊鏈接

　　當(dāng)你瀏覽一個有電話號碼的頁面時，可以直接按號碼就可以打出電話，這時電話號碼自動變成鏈接，當(dāng)然它們遵循電話號碼的格式，但有時你可能要手工創(chuàng)建一個電話號碼鏈接，這時你可以使用tel:前綴(URI模式)，如：

　　如果是SMS文本，那可以使用sms:前綴，啟動iPhone的文本消息應(yīng)用程序：

　iPhone上還有一些其它特殊功能的特殊鏈接，如：

　　l 鏈接到iTunes Store可以啟動iTunes，你可以在iTunes Store中通過搜索獲得一個鏈接，然后在搜索結(jié)果上點擊右鍵，選擇“復(fù)制iTunes Store URL”，另一個辦法是使用iTunes鏈接制作程序，它生成HTML標(biāo)記，包括一個很好的標(biāo)題和iTunes圖形按鈕。

　　l 鏈接到Google Maps可以啟動Maps應(yīng)用程序。

　　l YouTube鏈接將會啟動本地YouTube應(yīng)用程序，而不是YouTube站點。

　　l 鏈接到電子郵件地址將會啟動Mail應(yīng)用程序。

11. 首頁圖標(biāo)

　　要想讓訪問者喜歡上你的站點，那你的首頁就得做漂亮點，當(dāng)某個用戶將你的站點添加到首頁屏幕時，iPhone將會使用你的頁面屏幕截圖作為首頁圖標(biāo)，但也可以自己創(chuàng)建一個更好看的圖標(biāo)。

　　首先創(chuàng)建一個57x57像素的png文件apple-touch-icon.png，然后將它放到Web服務(wù)器的根目錄下，iPhone將會自動添加光滑和圓角效果。

圖 9 左邊是原圖，右邊是iPhone自動處理后的首頁圖標(biāo)

　　你也可以通過link元素靈活指定圖標(biāo)的位置和文件名，這允許你使用一個不同的Web服務(wù)器，如內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)，它會托管圖標(biāo)或跨多個站點共享相同的文件，為了指定圖標(biāo)的位置，可以采用下面的語法：

12. 調(diào)試：查看源代碼和控制臺

　　想要查看源代碼?這在iPhone上有點不方便，幸運的是在iPhone上Safari支持書簽，因此你可以使用書簽添加丟失的功能，那該怎么做呢?

　　首先可以通過Javascript的document.documentElement.innerHTML訪問到頁面的源代碼，在你的書簽中只有問題就是該以什么方式來顯示，例如，在一個新窗口中，好消息是這個Javascript可以通過書簽來執(zhí)行，iPhoneWebDev已經(jīng)打包了許多書簽，并且專為iPhone進行了優(yōu)化，可以直接使用，如果你有一個需要的書簽，只需要從Itunes同步到iPhone即可。

　　至于調(diào)試，iPhone包含了一個調(diào)試控制臺，你可以進入Safari的設(shè)置程序中，選擇開發(fā)人員，將調(diào)試控制臺設(shè)為開啟狀態(tài)，之后就會顯示在Safari瀏覽器URL工具欄的下方，它會顯示頁面的錯誤，你也可以使用控制臺對象從Javascript編寫調(diào)試消息，如：

　　console.log('Something');

　　console.error('Oops');

　　console.warning('Beware!');

　　非常高興你閱讀完本文，歡迎你進入令人興奮和具有挑戰(zhàn)的iPhone開發(fā)領(lǐng)域，我希望你馬上動手實驗。

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。

中文字幕理论片,69视频免费在线观看,亚洲成人app,国产1级毛片,刘涛最大尺度戏视频,欧美亚洲美女视频,2021韩国美女仙女屋vip视频