移動web資源整理

隨筆分類 - HTML5/CSS3

HTML5/CSS3 技術
摘要: 回顧2014年,剛轉來到新的部門,很是渴望作出一個所謂的成功產品,心態幾乎變了,天天都忙忙碌碌在項目中,把原來閱讀和學習的習慣給忽視了,做爲一個技術人員,沒有經過學習新的知識來充實本身,跟進時代的步伐,是比較致命的;另一點是運動也缺乏了,感受身體不如從前,例如工做太累,晚上容易失眠,讓本身感到惶恐... 閱讀全文
posted @  2015-03-03 14:20 白樹 閱讀(2228) |  評論 (23)  編輯
 
摘要: 本月26號參加webrebuild深圳站,會上聽了彪叔的對初心的講解,「工匠精神」這個詞又一次被提出,也再次引發了我對它的思考。專一一個項目並把它作得好,很好,更好...現實工做中,忙忙碌碌,抱着完成任務的想法可能會比較多,而想作得更好,需不惜花費時間精力,孜孜不倦,反覆改進產品,把99%提升到99... 閱讀全文
posted @  2014-12-29 19:00 白樹 閱讀(1887) |  評論 (23)  編輯
 
摘要: 11.11是公司成立的日子,16歲啦,我呢3歲半,感謝公司給了這樣一個平臺,讓我得以學習和成長,這裏祝願公司發展愈來愈好~進入主題,每一年11月11號是光棍節,產生於校園,原本只是一流傳於年輕人的娛樂性節日,以慶祝本身還是單身一族爲驕傲,而現在是各大商家以脫光爲由打折促銷的時期,成爲了所謂的」購物節「... 閱讀全文
posted @  2014-11-13 14:48 白樹 閱讀(3312) |  評論 (10)  編輯
 
摘要: 北京時間2014年9月10日凌晨1點,蘋果公司正式發佈其新一代產品 iPhone6,相信作webapp開發的同窗對它是充滿了好奇和等待,也擔憂它帶來各類坑爹,高清的分辨率,升級的retina顯示屏,咱們該如何作好適配呢?相比iPhone5,iPhone6擁有更高分辨率的retina HD displ... 閱讀全文
posted @  2014-09-12 16:34 白樹 閱讀(4303) |  評論 (16)  編輯
 
摘要: 今年3月份,因爲公司業務須要,我轉崗到微信產品部,離開了TID團隊,人都是有感情的動物,更況且在一個團隊呆了快 3 年,心中十分捨不得,鬼哥說了「天下沒有不散的宴席...」,在個人世界裏又多了一次離別的傷感(雖然還在隔壁工做)。加入了微信產品中心後,開始新的團隊生活,工做比之前忙多了,有時週六也要上... 閱讀全文
posted @  2014-04-26 10:36 白樹 閱讀(6793) |  評論 (24)  編輯
 
摘要: 回想2年前剛開始接觸手機項目,接到PSD稿後,發現視覺設計師們喜歡用微軟雅黑做爲中文字體進行設計,因而我寫頁面的時候也定義 font-family 爲微軟雅黑,後來發到線上後,細心的產品經理髮現頁面的字體不是微軟雅黑,要求立刻修改,我就驚呆了,還跟產品爭執一番。後來瞭解到的手機系統 ios、andr... 閱讀全文
posted @  2014-03-12 14:29 白樹 閱讀(6526) |  評論 (20)  編輯
 
摘要: 作移動端有一段時間,今天有同事問了我 article 和 section 標籤的使用,模模糊糊的解釋了下,他似懂非懂,有點小尷尬。突然間以爲本身有必要再翻翻書籍,重溫下 html5 的新元素。html5 新增的結構元素,有的常用到,有的用不上,當頁面禁用樣式後,它們的展示跟 div 是沒撒差異,有同窗可能會說,既然同樣,又不影響頁面的最終展示,無論是 article 仍是 section 能用就行了。若是考慮實際項目針對用戶,我也是這麼認爲的,但做爲一個重構仔,咱們須要讓標籤語義化,清晰的結構,更好的 seo,利於特殊終端的閱讀(無障礙),此時 html5 標籤的做用就很明顯了,並非說能 閱讀全文
posted @  2014-03-06 18:18 白樹 閱讀(1721) |  評論 (14)  編輯
 
摘要: 有段時間一直折騰移動端頁面彈性滾動的各類問題,作了點研究,今天作個小分享~傳統 pc 端中,子容器高度超出父容器高度,一般使用 overflow:auto 可出現滾動條拖動顯示溢出的內容,而移動web開發中,因爲瀏覽器廠商的系統不一樣、版本不一樣,致使有部分機型不支持對彈性滾動,從而在開發中製造了所謂的 BUG。上圖若是在PC端中,咱們能夠利用 position:fixed 和 overflow:auto 進行簡單的佈局實現咱們須要的效果,而在手機端遇到的問題以下:ios4 和 android2.2 如下不支持 position:fixedios 和 android2.3 如下不支持 overfl 閱讀全文
posted @  2014-02-18 18:28 白樹 閱讀(4156) |  評論 (5)  編輯
 
摘要: 表單元素在網頁設計中使用的很是頻繁,如文本輸入框、單選框、複選框、選擇列表、上傳文件,它們在瀏覽器中的展示有自帶的外觀,爲了在視覺上取得更好的產品體驗,保持客戶端的統一,一般產品經理會提出須要改變它的外觀,使用自定義的,對於產品自己來講這樣的要求是加分項,開發在力所能及的範圍內應該大力支持。作H5移動開發,並無原生APP開發那樣,大部份內容均可以自定義,移動端H5頁面受手機系統的影響,不一樣的瀏覽廠商對錶單元素的渲染效果差別很大。下圖爲 iphone4s 、魅族 android4.4 、諾基亞 winphone8 三部測試機下4種不一樣表單元素的默認外觀展示。從上圖咱們能夠看出:表單輸入框有默認 閱讀全文
posted @  2014-01-19 22:03 白樹 閱讀(2058) |  評論 (7)  編輯
 
摘要: 特別聲明:此篇文章由David根據Charles Morris的英文文章原名《Adapting your WebKit-optimized site for Internet Explorer 10》進行翻譯,整個譯文帶有咱們本身的理解與思想,若是譯得很差或不對之處還請同行朋友指點。英文出處:http://blogs.windows.com/windows_phone/b/wpdev/archive/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10.aspx中文譯文:http://www.w3cplu 閱讀全文
posted @  2014-01-08 23:34 白樹 閱讀(345) |  評論 (0)  編輯
 
摘要: 國外一篇文章,有點意思,轉載過來,準備嘗試下~中文地址:http://www.cnblogs.com/rubylouvre/p/3471490.html原文地址:http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css你知道咱們能夠在瀏覽器中用css開啓硬件加速,使GPU (Graphics Processing Unit) 發揮功能,從而提高性能嗎?如今大多數電腦的顯卡都支持硬件加速。鑑於此,咱們能夠發揮GPU的力量,從而使咱們的網站或應用表現的更爲流暢。在桌面端和移 閱讀全文
posted @  2014-01-08 09:29 白樹 閱讀(2000) |  評論 (1)  編輯
 
摘要: 微信 Android 5.1 和 iPhone 5.1 已正式發佈了,聽說本12月底,微信將推出 Winphone 5.0版本,全面支持微信支付,它綁定 IE10 瀏覽器,那麼作微信公衆號的 H5 頁面,除了作好 webkit 兼容外,IE10 的兼容也是必不可少的。曾經寫過《常見CSS3屬性對ios&android&winphone的支持》一文,當時寫過對Windows Phone 7 和Windows Phone 8的對應的瀏覽器分別是IE9和IE10作好兼容,但因爲產品的特性對 Winphone 支持不友好,項目組也沒有對 IE9 和 IE10 進行特別的處理,如今微信支 閱讀全文
posted @  2013-12-30 17:32 白樹 閱讀(1872) |  評論 (4)  編輯
 
摘要: 接近年末了,又到產品們趕KPI的時間,開發也跟着辛苦,因而連續加班了4個星期,項目總算有點轉機,也終於擠出點時間,寫篇文章,just for fun ~高清顯示屏原理,以前在團隊內作過的一個相似的分享,由於上次有園友問了我手機端css sprite的設計原理,不知道手機端的圖片爲何是用2倍大,背景... 閱讀全文
posted @  2013-11-26 14:36 白樹 閱讀(6229) |  評論 (28)  編輯
 
摘要: 乾貨來了,在於提高用戶體驗,很是實用,作webapp的童鞋不要錯過~本文由99根據Kyle Peatt的《A Beginner's Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App》所譯英文出處:http://www.mobify.com/blog/beginners-guide-to-perceived-performance/中文譯文:http://www.w3cplus.com/performance/beginners-guide-to-perceived 閱讀全文
posted @  2013-10-28 23:24 白樹 閱讀(1189) |  評論 (3)  編輯
 
摘要: 說到兩端對齊,你們並不陌生,在word、powerpoint、outlook等界面導航處,其實都有一個兩端對齊(分散對齊)的按鈕,平時使用的也很少,咱們更習慣與左對齊、居中對齊、右對齊的方式來對齊頁面的文本或模塊。響應式網頁設計出現以來,更可能是使用百分比布自適應佈局,特別是在移動端,兩端對齊的方式顯... 閱讀全文
posted @  2013-08-30 09:42 白樹 閱讀(6979) |  評論 (8)  編輯
 
摘要: 2個月前,我在博文《webapp開發中兼容Android4.0如下版本的css hack》中寫過「那對於作移動網頁開發的同事來講,通常只要作好webkit內核瀏覽器的展示效果就好了」,在這裏糾正下,在目前Wepapp開發中,主要對webkit內核的手機作好各個版本的兼容已經不夠了,像其它的高端智能手... 閱讀全文
posted @  2013-08-03 13:56 白樹 閱讀(3733) |  評論 (0)  編輯
 
摘要: 話說如今的手機型號愈來愈多,主要仍是android和ios這2個巨頭稱霸了江湖,而他們自帶的瀏覽器內核是webkit,那對於作移動網頁開發的同事來講,通常只要作好webkit內核瀏覽器的展示效果就好了,看起來很簡單,其實背後還有一個大坑等着你。雖然說是webkit內核,但頁面的展示效果還會受到自身系統的影響,升級後的系統打了補丁,新增了新的屬性,支持更多豐富炫麗的效果,那麼舊的系統(未升級的)就不支持一些新的屬性,開發哥哥就是沒有作好低端版本兼容的話,就會產生所謂的bug的,再加上android和ios系統各個版本也會帶私有屬性或者少帶某個屬性,因而坑爹的東西就這樣產生,各類奇葩的bug,彷彿又 閱讀全文
posted @  2013-06-26 15:39 白樹 閱讀(3829) |  評論 (2)  編輯
 
摘要: 用ZenCoding這麼久了,總結下經常使用CSS3的寫法,方便之後查找: PropertyAlias@media print {}@mbox-sizing:border-box;bxz:bbbox-shadow:;bxsh-webkit-box-shadow:0 0 0 #000;bxsh:wborder-radius:;bdrsbackground-size:;bgzbackground-size:auto;bgz:acontent:;cttext-shadow:0 0 0 #000;tsh+ 閱讀全文
posted @  2013-06-20 15:14 白樹 閱讀(632) |  評論 (4)  編輯
 
摘要: 一直折騰position:fixed在ios和android的使用,而事實上這麼上流的ios4系統竟然不支持position:fixed,幸運的是蘋果公司在ios5系統修復了這個bug,比較理想的解決方案是讓全部用戶把系統升級到ios5及以上版本,這種想法在國外還好,在國內環境下,由於越獄而不想去升級手機的人不少,若是強迫用戶去升級,那可能會把你的產品KS了。而你也不可能跟你老闆說ios4什麼不兼容那個屬性啊,讓用戶升級啊!老闆看到的是結果,你作不出來,別人怎麼作得出來呢,這樣你老闆可能會對你的能力感到懷疑,或者認爲你並不專業......那其實回到頭來咱們仍是乖乖去作好兼容,要麼就找到完美的解 閱讀全文
posted @  2013-06-14 15:21 白樹 閱讀(5915) |  評論 (5)  編輯
 
摘要: Png是圖像文件存儲格式,在網頁設計中已經不是一個陌生的名詞,在前端開發中常用到它,如經常使用CSS 雪碧圖。而Png的使用不只僅如此,Png有多少種格式,有哪些特色,PC端中經常使用的Png格式是哪些,手機端最合適的Png格式是什麼呢?若是你對這些問題有疑問,那麼很開心的告訴你,這裏有你須要的答案(*... 閱讀全文
posted @  2013-05-30 17:54 白樹 閱讀(5949) |  評論 (39)  編輯
 
摘要: 在手機webkit瀏覽器中,用戶在某一些按鈕上長按3秒鐘後,會彈出一個系統的列表,ios和android各自展示不同,列表能夠有複製或在在新窗口打開的等操做,這種體驗對於按鈕來講是不須要的,按鈕上是綁定事件,有特殊功能,而這裏系統把它當作一個連接的意義。查看了代碼,原來是一個a標籤,連接地址爲空。<a href="#" class="btn">查看餘額</a>找了資料後,ios平臺有個解決辦法能夠經過控制當前元素的-webkit-touch-callout的樣式屬性爲none;屬性來禁止觸發系統的菜單a{-webkit-touc 閱讀全文
posted @  2013-04-28 11:49 白樹 閱讀(1641) |  評論 (1)  編輯
 
摘要: 大概是上個月,使用YUI壓縮一個css文件後,發現只要是被壓縮後的css文件有部分根本沒法工做,一直都不知啥問題引發的,讓我感到頭疼。今天發現了只要是在媒體查詢中的樣式沒法起做用,因而纔開始懷疑是media被壓縮後引發的bug,對YUI壓縮不得不產生成疑問後來谷歌了:果真是YUI引發的bug:上面的圖片解釋爲:若是電腦的YUI compressor仍是舊的版本,壓縮中,YUI compressor將media中的and後面重要的空格給刪除了,致使media queries失效。後來我查看了電腦的YUI版本,我擦,竟然是2009年8月份,嚴重out了- - 親!要與時俱進啊!下載個最新版本後終於 閱讀全文
posted @  2013-04-18 18:53 白樹 閱讀(989) |  評論 (0)  編輯
 
摘要: 這篇文章原文地址不知道在哪裏!無論怎麼樣,對個人學習仍是有幫忙,先收藏了。Web技術的發展速度太快了,若是你不與時俱進,就會被淘汰。所以,爲了應對即將到來的HTML5,本文總結了22個HTML5的初級技巧,但願能對你進一步學習好HTML5會有所幫助。1. 新的Doctype聲明XHTML的聲明太長了,我相信不多會有前端開發人員能手寫出這個Doctype聲明。HTML5的Doctype聲明很短,看到這個聲明相信你立刻就能記住,不用浪費腦細胞去記那長的有點變態的XHTML的Doctype聲明瞭。HTML5的簡短的DOCTYPE聲明是讓Firefox、Chrome等現代瀏覽器和IE6/7/8等瀏覽器 閱讀全文
posted @  2013-03-28 16:12 白樹 閱讀(958) |  評論 (1)  編輯
 
摘要: 近期接觸了HTML5本地緩存,在HTML頁面的html標籤加入後綴爲.appcache的文件,便可以輕鬆地建立 web 應用的離線版本。使用本地緩存帶來的好處:離線瀏覽 - 用戶可在應用離線時使用它們速度 - 已緩存資源加載得更快減小服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。瀏覽器支持:全部主流瀏覽器均支持應用程序緩存,除了 IEHTML5 Cache Manifest 實例下面的例子展現了帶有 cache manifest 的 HTML 文檔(供離線瀏覽):HTML頁面demo.appcache文件Cache Manifest 基礎如需啓用應用程序緩存,請在文檔的 < 閱讀全文
posted @  2013-03-28 15:36 白樹 閱讀(1943) |  評論 (2)  編輯
 
摘要: 2012年8月份剛開始接觸前端移動開發,如今主要是android和ios系統的手機,一套代碼須要同時兼容android和ios,就android而言已經有N個型號的手機,若是css代碼在這些手機上解析有稍微差異或者出現bug,那麼,作兼容是必不可少,事實上隨着手機版本的不斷更新,產生一些不一樣的體驗,這也能夠理解爲製造了bug~半年多了,遇到了很多問題,解決問題的過程即辛苦又很開心,辛苦是由於剛接觸,不少知識都不懂,須要花費不少的時間去摸索遇到的困難,開心呢固然是接觸到新鮮的手機開發,感到比較興奮,學習了很多知識。好了,很少說,開始本次的主題,今天主要對iphone手機的兼容方法作總結。摘要:[ 閱讀全文
posted @  2013-03-21 10:43 白樹 閱讀(2831) |  評論 (0)  編輯
 
摘要: 張鑫旭博客的一篇css3盒模型文章,對我而言,實用價值挺大的,屢次重複打開該文章學習,這一次決定轉載到個人博客!1、淡淡的開頭語昨天趁着不想工做的時間間隙閒逛24ways,在My CSS Wish List一文中,見到了個新鮮的CSS屬性,就是題目中的box-flex,之前沒有見過,頓生疑惑,不知是騾子仍是馬,因而習慣性谷歌之,真是不穀不知道,一谷嚇一跳。倒不是該屬性自己,而是此屬性做爲導火索,讓我瞭解了下CSS3中新的盒子模型——彈性盒子模型(Flexible Box Model)。對於我這樣的流體佈局控而言,這種盒子模型的出現就比如打麻將槓上開花槓到絕張邊七條,讓人興奮不已。在國外,彈性盒 閱讀全文
posted @  2013-03-13 22:20 白樹 閱讀(624) |  評論 (0)  編輯
 
摘要: 基於webkit內核的移動開發筆記,以前已經寫過4篇,主要是關於移動開發重構的分享,今晚有空了再寫一篇。回憶去年年末最後的一個項目,還有一個很怪異的bug,讓項目團隊的成員感到十分頭疼。測試組的同事作完最後的測試迴歸後,項目發佈上線,並經過微信推送連接。在ios系統中(android顯示正常),微信內頁打開連接後,點擊頁面的一個按鈕,頁面被從新加載了,這時才能夠對頁面進行其它操做。再次不斷測試後,咱們這邊的同事確定是微信軟件內部配置引發的,但是微信的同事也沒法定位具體的問題......糾結了好久....後來啊,想到各類蛋碎,才知道是a標籤的引發的<a href="#none&q 閱讀全文
posted @  2013-03-08 00:03 白樹 閱讀(2012) |  評論 (5)  編輯
 
摘要: 去年年末,作完最後一個項目就能夠開開心心回家,但是在測試階段,發現了很多bug,爲了避免影響回家時間,加班加點也要解決這些問題,這裏算是工做回憶,也算是工做的一點小總結。在ios4+和android2+系統,當手指觸摸屏幕a標籤連接或按鈕時,會產生不一樣的效果,對於ios點擊元素的時候,就會出現一個半透明的灰色背景;對於android則出現紅色的邊框。對這2個系統自帶的效果,這種體驗的意義無非爲了告知用戶按鈕已經點擊到,帶來的價值是好的。惋惜帶來了體驗的同時,也帶來了bug......主要是在android手機的一個bug使用css給模塊設置了opacity:0,控制該模塊隱藏,若是該模塊包含a標 閱讀全文
posted @  2013-02-28 12:29 白樹 閱讀(5224) |  評論 (8)  編輯
 
摘要: 關於響應式的,近來國內外也不斷提到,仍是目前比較流行的技術話題,這篇文章來至淘寶UED的,講得是響應式圖片,寫得很不錯。隨着Retina 屏幕的逐漸普及,網頁中對圖片的適配要求也愈來愈高。如何讓圖片在放大了兩倍的Retina屏幕顯示依然清晰,曾經一度困擾着網頁開發者,好在CSS3 與 HTML5 已經着力在改變這種現狀。那麼到底什麼是響應式圖片呢?什麼是響應式圖片?響應式圖片是指:用戶代理根據輸出設備的分辨率不一樣加載不一樣類型的圖片,不會形成帶寬的浪費。同時,在改變輸出設備類型或分辨率時,能及時加載對應類型的圖片。CSS3 響應式圖片對於不少 IOS 開發者來講可能已經不太陌生了,爲了適配 Re 閱讀全文
posted @  2013-02-19 20:51 白樹 閱讀(1815) |  評論 (0)  編輯
 
摘要: 談到漸變,你們並不陌生,設計稿中常常會遇到,其中最多見的也最平凡使用的是線性漸變和徑向漸變,在pc端開發,不少大型網站都須要考慮全部瀏覽器的兼容,一般如漸變的按鈕或者背景圖通常會被重構師們切成圖片,而在移動開發中若是使用圖片是很佔流量,能不用圖片儘可能不使用,那麼,CSS3來實現無圖的漸變效果是首選的。本文以移動開發中遇到的一個徑向漸變例子,講解CSS3徑向漸變在項目中的應用和以及須要注意的地方。1、徑向漸變的基礎知識徑向漸變的概念:從起點到終點顏色從內到外進行圓形漸變(從中間向外拉)。2、徑向漸變的基本語法background-image:-webkit-gradient(type,x1 y1 閱讀全文
posted @  2013-02-17 21:26 白樹 閱讀(5513) |  評論 (11)  編輯
 
摘要: HTML5新增了video元素和audio元素,替代了傳統HTML4使用複雜的object元素與embed來播放視頻或者音頻的方法。此次的一個項目,產品經理要求手機加載開始時播放音樂,想到播放音樂,又是在ios和android平臺,那audio元素必然是首選。1、audio的基本知識audio:標籤訂義聲音,好比音樂或其餘音頻流。2、audio的屬性3、audio的寫法寫法一:你的瀏覽器還不支持哦寫法二:優先播放音樂baishu.ogg,不支持在播放baishu.mp34、audio實戰在項目中使用audio,一開始在chrome瀏覽器下作測試,使用了autoplay和loop屬性,在頁面打開 閱讀全文
posted @  2013-02-05 17:03 白樹 閱讀(4698) |  評論 (20)  編輯
 
摘要: Chrome瀏覽器,相信你們並不陌生,該瀏覽器是基於其餘開放原始碼軟件所撰寫,包括WebKit和Mozilla,以其簡單、快速、安全、穩定、擴展豐富等特性受到了很多人的喜好,2012年8月6日,Chrome已達全球份額的34%,成使用最廣瀏覽器。Chrome瀏覽器提供了很是簡單方便的開發人員工具,方便咱們在PC端作手機開發,那麼如何是如何在PC上作簡單的手機頁面開發呢?首先下載chrome最新版本版本 24.0.1312.56(有些舊版的缺乏一些功能,建議更新到最新版本),而後在Chrome瀏覽器中打開某個頁面,選定網頁元素(如通欄、文字、圖片等),按鼠標右鍵,從右鍵菜單中選擇「審查元素」,就 閱讀全文
posted @  2013-01-30 18:12 白樹 閱讀(2688) |  評論 (5)  編輯

 

 
 
相關文章
相關標籤/搜索