您現在的位置是:電腦技術吧?>? 故障問題 ??>??webkit,webkit2??>??正文詳情

webkit,webkit2

牢寄柔2019-11-08 09:21:50 人圍觀
簡介nodewebkit上一篇文章介紹了HTML5的一些新特性和技巧現在我們將總結更多的HTML、CSS和JavaScript的WebKit特性。HTML,從HTML文檔的開始到結束:webkit是什么意思

前面有一篇文章介紹了HTML5的一些新特性以及技巧, 現再來總結一些更多的針對webkit的HTML, CSS和Javascript方面的特性.HTML, 從HTML文檔的開始到結束排列:XML/HTML Code復制內容到剪貼板

  1. metaname=viewportcontent=width=device-width,initial-scale=1.0/
  2. !--讓內容的寬度自適應為設備的寬度,在做MobileWeb時必須加的一條--
  3. metaname=format-detectioncontent=telephone=no]]
  4. !--禁用手機號碼鏈接(foriPhone)--
  5. linkrel=apple-touch-iconhref=icon.png/
  6. !--設置你網頁的圖標,尺寸為57X57px--
  7. !iOS2.0 :telliOSnottoapplyanyglareeffectstotheicon
  8. linkrel=apple-touch-icon-precomposedhref=icon.png/
  9. !iOS4.2 iconsfordifferentresolutions
  10. linkrel=apple-touch-iconsizes=7272href=touch-icon-ipad.png/
  11. linkrel=apple-touch-iconsizes=114114href=touch-icon-iphone4.png/
  12. linkrel=apple-touch-startup-imagehref=startup.png
  13. !--全屏啟動時候的啟動畫面圖像,尺寸320X460px--
  14. metaname=apple-mobile-web-app-capablecontent=yes/
  15. !--是否允許全屏顯示,只有在桌面啟動時可用--
  16. metaname=apple-mobile-web-app-status-bar-stylecontent=black/
  17. !--控制全屏時頂部狀態欄的外觀,默認白色--
  18. inputautocorrect=offautocomplete=offautocapitalize=off
  19. !--取消自動完成,自動大寫單詞字母(適用于Mobile上)--
  20. inputtype=textx-webkit-speech/
  21. !--語音輸入--
  22. inputtype=fileaccept=image/*;capture=camera/
  23. !--文件上傳,從相機捕獲媒體,下同--
  24. inputtype=fileaccept=video/*;capture=camcorder/
  25. inputtype=fileaccept=audio/*;capture=microphone/
  26. ahref=sms:18005555555,18005555556]]
  27. !--發送短信給多個人的鏈接--
  28. ahref=sms:18005555555?body=Text goes here]]
  29. !--發送短信附帶內容的鏈接--
  30. ahref=tel:18005555555]]Callusat1-800-555-5555/a]]
  31. !--撥打電話的鏈接--
CSS:CSS Code復制內容到剪貼板
  1. -webkit-tap-highlight-color:transparent;
  2. /*Mobile上點擊鏈接高亮的時候設置顏色為透明*/
  3. -webkit-user-select:none;
  4. /*設置為無法選擇文本*/
  5. -webkit-touch-callout:none;
  6. /*長按時不觸發系統的菜單,可用在圖片上加這個屬性禁止下載圖片*/
  7. :-webkit-full-screencanvas{}
  8. /*全屏模式時的樣式(forDesktop)*/
  9. divp:matches(em,b,strong){}
  10. /*使用mathes來匹配多個選擇器*/
  11. @mediaonlyscreenand(max-width:480px){}
  12. /*指定Mobile設備或者小屏幕桌面屏幕*/
  13. @media(-webkit-min-device-pixel-ratio:2),(min-resolution:300dpi){}
  14. /*指定高分辨率屏幕設備*/
  15. header{background-image:url(header-highres.png);}
  16. }
  17. @media(-webkit-max-device-pixel-ratio:1.5),(max-resolution:299dpi){/*指定低分辨率屏幕設備*/}
  18. header{background-image:url(header-lowres.png);}
  19. }
  20. background-repeat:space;background-repeat:round;
  21. /*這兩種CSS3的背景屬性值得研究*/
  22. width:calc(100%-40px);
  23. /*計算寬度*/
  24. text-decoration:#FF8800wavyine-through;
  25. /*波浪型鏈接*/
  26. text-rendering:optimizeLegibility;
  27. /*用這個屬性之后會收緊字符間的距離*/
  28. font-variant-ligatures:common-ligatures;
  29. /*設置CSS連字*/
  30. transform:rotate(90);
  31. /*旋轉90度*/
  32. transform-origin:centercenter;transform-origin
  33. /*可以改變變換的位置*/
  34. -webkit-appearance:none;-webkit-appearance
  35. /*可以改變按鈕或者其它控件看起來類似本地的控件*/
美化表單校驗時的提示樣式CSS Code復制內容到剪貼板
  1. -webkit-validation-bubble{}
  2. -webkit-validation-bubble-message{}
  3. -webkit-validation-bubble-arrow{}
  4. -webkit-validation-bubble-arrow-clipper{}
當提示出現時類似于下面的結構XML/HTML Code復制內容到剪貼板
  1. div-webkit-validation-bubble
  2. div-webkit-validation-bubble-arrow/div
  3. div-webkit-validation-bubble-arrow-clipper/div
  4. div-webkit-validation-bubble-messageErrorMessage/div
  5. /div
自定義webkit瀏覽器的滾動條, 見Google Reader等在Chrome/Safari下的效果, 下面是一個實例, 這個滾動條的樣式代碼如下CSS Code復制內容到剪貼板
  1. CustomizedWebKitScrollbar/*Letsgetthispartystarted*/
  2. ::-webkit-scrollbar{
  3. width:12px;
  4. }
  5. /*Track*/
  6. ::-webkit-scrollbar-track{
  7. -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
  8. -webkit-border-radius:10px;
  9. border-radius:10px;
  10. }
  11. /*Handle*/
  12. ::-webkit-scrollbar-thumb{
  13. -webkit-border-radius:10px;
  14. border-radius:10px;
  15. background:rgba(255,0,0,0.8);
  16. -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
  17. }
  18. ::-webkit-scrollbar-thumb:window-inactive{
  19. background:rgba(255,0,0,0.4);
  20. }
  21. -webkit-background-composite:plus-darker;-webkit-background-composite
  22. /*用來設置一個元素的背景或顏色的組合樣式*/
  23. -webkit-text-stroke:1pxrgba(0,0,0,0.5);-webkit-text-stroke
  24. /*可以用來給文字添加描邊*/
  25. -webkit-mask-image:url(/path/to/mask.png);
  26. /*定義一個圖片用來遮罩元素*/
  27. -webkit-box-reflect:below5px;
  28. /*定義了一個元素的反射*/
  29. :local-link{font-weight:normal;}
  30. /*local-link可以定義相對地址的鏈接樣式*/
Javascript:window.scrollTo(0,0); 隱藏地址欄window.matchMedia(); 匹配媒體navigator.connection; 決定手機是否運行在WiFi/3G等網絡window.devicePixelRatio; 決定屏幕分辨率(iPhone 4值為2, 而Nexus One值為1.5)window.navigator.onLine; 取得網絡連接狀態window.navigator.standalone; 決定iPhone是否處于全屏狀態touch事件 (iOS, Android 2.2 ): touchstart, touchmove, touchend, touchcancelgesture事件 (Apple only, iOS 2 ): gesturestart, gesturechange, gesturend give access to predefined gestures (rotation, scale, position)JavaScript Code復制內容到剪貼板
  1. window.addEventListener(orientationchange,function(e){
  2. //window.orientation(0isportrait,90and-90arelandscape)
  3. },false);
  4. window.addEventListener(deviceorientation,function(e){
  5. //e.alpha
  6. //e.beta
  7. //e.gamma
  8. },false);
  9. window.addEventListener(devicemotion,function(e){
  10. //e.accelerationIncludingGravity.x
  11. //e.accelerationIncludingGravity.y
  12. //e.accelerationIncludingGravity.z
  13. },false);
requestAnimationFrame() 新的動畫函數element.webkitRequestFullScreen() 調用全屏函數

版權聲明:本文由 牢寄柔 整理編輯。

原標題:試驗性webkit,webkit功能設置

轉載注明出處:http://www.dn9ww09s.icu/fault/11521.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 無線路由器怎么設置,怎么樣設置路由器

    無線路由器怎么設置,怎么樣設置路由器 相關圖片怎么設置路由器wifi現在WiFi無線路由器非常普遍,基本上家家戶戶都有寬帶,并且安裝了WiFi不過,對于了解網絡技術的人來說,無線路由器的設置是一件非常簡單的事情,對于新手來說...

  • border怎么用,border2

    border怎么用,border2 相關圖片border bottom首先,如果你曾經用表來制作網頁,你應該知道如何在表中畫一條虛線你需要畫一張很小的畫來填滿它事實上,我們有一個更簡單的方法。只需在TD/TD中添加這樣一個段落,就...

  • 三星連接電腦,三星手機連接電腦

    三星連接電腦,三星手機連接電腦 相關圖片臺式電腦怎么連wifi如果要將多媒體文件從手機導出到計算機,或將文件從計算機導入到手機。然后,將數據線與計算機連接,就可以實現這一功能但三星的用戶不知道如何連接現在,小...

  • 本地連接2受限制或無連接,本地連接受限制或無連接

    本地連接2受限制或無連接,本地連接受限制或無連接 相關圖片本地連接受限制或無連接 xp在網絡飛速發展的今天,使用電腦上網已是不足為奇的事情了,不過也有的用戶在使用電腦的時候經常會遇到電腦本地連接受限制或無連接,那么該如何解決...

  • 全屏背景圖,空間背景圖全屏

    全屏背景圖,空間背景圖全屏 相關圖片純色背景圖全屏幕的CSS正文背景圖像,無論分辨率如何在主體中嵌套一個img元素,并將img的Z索引控制為-1,代碼如下:img id=BG SRC=/圖像/BGJPG寬度背景圖可愛...

  • 小米pro筆記本換顯卡,小米筆記本怎么換顯卡

    小米pro筆記本換顯卡,小米筆記本怎么換顯卡 相關圖片戴爾筆記本可以換顯卡嗎眾所周知,顯卡是計算機的一部分顯卡分為集成顯卡和獨立顯卡臺式機一般采用集成顯卡,臺式機的運行速度一般比筆記本電腦快如果筆記本的用戶遇到視頻卡...

  • 表單的基本元素,表單元素都有哪些元素

    表單的基本元素,表單元素都有哪些元素 相關圖片表單元素都有什么類型HTML5的新表單元素:HTML5有幾個涉及表單的元素和屬性。本章介紹以下新的表單元素:datalistkeygenoutput瀏覽器支持輸入類型iefiref常見的表單元素有哪些...

  • 傳輸文件,怎樣用文件傳輸助手傳輸文件

    傳輸文件,怎樣用文件傳輸助手傳輸文件 相關圖片文件傳輸助手是什么當兩臺計算機在局域網中不可避免地需要傳輸文件時,在文件傳輸過程中會有很多限制。我們需要逐個設置這些限制,這樣就可以輕松地使用文件傳輸如何傳輸文件...

  • 能位匹配原理,能崗匹配原理

    能位匹配原理,能崗匹配原理 相關圖片檔位跟速度怎么匹配看看一個簡單的CSS:div?divbox P span紅色{顏色:紅色;}。根據我們對這個CSS的理解,瀏覽器首先查找ID為divbox的div元素,然后查找檔速度如何匹配...

  • 電腦打不開機怎么解決,電腦怎么打開機

    電腦打不開機怎么解決,電腦怎么打開機 相關圖片筆記本電腦打不開機怎么解決想必,用戶一定遇到過電腦無法開機的情況。很多人會在網上咨詢,“如果我不能打開電腦,我能做什么?”一些人會立即打電話給電腦維護人員進行維修...

熱評文章

  • 電腦如何設置鬧鐘,電腦設置鬧鐘提醒

    電腦如何設置鬧鐘,電腦設置鬧鐘提醒 相關圖片電腦可以調鬧鐘嗎每個人都知道鬧鐘可以在手機上設定其實,電腦也有鬧鐘的功能它很新鮮,設置也很簡單我們只需要在指定的時間內設置并運行指定的播放軟件。考慮到很多用戶還沒...

  • 導航菜單是什么,electron導航菜單

    導航菜單是什么,electron導航菜單 相關圖片easyui導航菜單使用CSS練習一個簡單實用的水平導航菜單。為了便于您理解,我們在CSS的每個定義中都添加了注釋。我相信在今年的菜單制作教程中,你可以用CSS寫一個更漂亮的導航菜v...

  • 電腦一開機就藍屏,開機就藍屏怎么辦

    電腦一開機就藍屏,開機就藍屏怎么辦 相關圖片開機藍屏計算機藍屏也稱為藍屏崩潰。電腦藍屏死機有很多原因藍屏的出現是我們在愉快地使用計算機時遇到的一個常見故障我們的電腦壞了嗎所以當我們遇到電腦的藍屏時,我們應該...

  • 筆記本電腦怎么切換鍵盤,筆記本小鍵盤怎么切換

    筆記本電腦怎么切換鍵盤,筆記本小鍵盤怎么切換 相關圖片筆記本鍵盤解鎖作為一種輸入設備,使用鍵盤輸入數字是其最常用的功能之一一般筆記本鍵盤數字鍵盤一般布置在一行的上部。但對于屏幕尺寸為15.6英寸的筆記本電腦,制造商將為其配...

  • 布局居中,網頁div布局居中

    布局居中,網頁div布局居中 相關圖片div布局詳解CSS布局示例這個例子被認為是非常實際的讓圖像在div容器中上下左右居中,即水平和垂直居中。它很有用一般情況下,這種可能性相當高讓我們結合CSS和HTML來實現css flex布局...

  • 電腦老是自動重啟,電腦突然自動重啟

    電腦老是自動重啟,電腦突然自動重啟 相關圖片電腦開機一直重啟主機更換內存模塊后,開機后電腦會自動重啟只有切斷電源,它才能停止否則,計算機將自動重新啟動并成為一個死循環我該怎么辦別擔心。接下來,我將分享自動重...

  • 創造與魔法狼王屬性,創造與魔法寵物

    創造與魔法狼王屬性,創造與魔法寵物 相關圖片創造與魔法遺跡怎么進入原則上,相同顏色和不同顏色的兩個詞重疊在一起。通過分別添加clip屬性,將上下兩個單詞切割成不同的位置,從而產生兩種不同的顏色測試環境Firefox 1.5、I創...

  • win7顯示隱藏文件設置,如何顯示隱藏文件

    win7顯示隱藏文件設置,如何顯示隱藏文件 相關圖片電腦顯示隱藏文件有時有些人會使用自己的電腦,他們不想讓人們看到一些小東西這種方法雖然不是很保密,但是非常快捷方便,所以很多人會選擇這種方式來隱藏自己的小秘密。如何...

  • p標簽會自動換行嗎,p標簽不自動換行

    p標簽會自動換行嗎,p標簽不自動換行 相關圖片table標簽自動換行pre標記不會自動包裝,使用起來有點麻煩,但現在很少使用。但是如果你用的時候需要把線包起來呢?下面是一個CSS解決方案,解決了包裝前標簽的問題。它支持各種瀏...

  • 電腦關機自動重啟怎么解決,電腦關機老是自動重啟

    電腦關機自動重啟怎么解決,電腦關機老是自動重啟 相關圖片電腦關機自動重啟是什么原因有網友遇到關機的問題,以前很好斷電后,每次關機后都會立即重新啟動計算機一直這樣流傳他們對電腦了解不多,所以在網上尋求幫助為什么會這樣怎么...

關注微信

变脸官网查询