摘要:移動端活動頁面常常需要能夠分享到各種社交中,常用的有微信等。微信二維碼問題同一個頁面里要是有兩個二維碼,長按掃描總是只能掃出左側第一個二維碼。
首發于簡書博客:http://www.jianshu.com/p/e958...
2017-11-25 更新:5. 使用 Gulp 拼合圖片
1. 單個頁面內容不能過多設計常用尺寸:750 x 1334 / 640 x 1134,包含了手機頂部信號欄的高度。
移動端H5活動頁面常常需要能夠分享到各種社交App中,常用的有 微信、QQ 等。
使用移動設備查看頁面時會發現,在微信瀏覽器中有頂部導航欄,在qq內置瀏覽器里不止有 頂部導航,底部也有 操作欄(safari瀏覽器也一樣),這些都會占用設計稿顯示區域,因此在 設計環節 就需要考慮內容的多少,頁面底部要 預留一定的空白,這樣在微信或qq中才不會被遮住。
如下圖(QQ內置瀏覽器):頁面設計尺寸為 750 x 1334,頂部占用 150px,底部占用 110px,共占用了 260px,因此設計稿內容應控制在 1334-260=1074px 的高度內。編寫代碼時,使用 Chrome 瀏覽器模擬設備大小,將該尺寸(750*1074)存下來,用于實時查看移動端頁面效果。
如果頁面已經寫好了,就只能按照上面的尺寸進行內容的調整了,縮小元素間距,縮放圖片大小等。
分享下我的失敗嘗試:
如果對整個頁面進行縮放(使用 meta 標簽),按照設計稿的比例,在高度滿足的情況下寬度會偏小,兩邊會有白底;
就算使用 rem 作為相關間距的單位,也沒有辦法找到一個合適的比例在兩種高度(微信/QQ)下切換,因此統一調成適配 QQ 的,這樣就算在微信下有多余的空白,固定底部的引導下滑箭頭也能使其不會過于突兀。
2. 標題簡短移動端瀏覽器導航條寬度有限,簡短的標題可以使其展示完整。
3. 二維碼圖片使用 img 標簽引入二維碼圖片不要寫為元素背景,不然長按沒有辦法觸發掃描功能。應使用 img 標簽引入,如下:
4. 二維碼圖片記得掃描測試有時候掃描二維碼之后,會跳轉至某個地址,不幸的話QQ或者微信會對這個地址進行溫馨提醒,如下圖所示:
這樣會阻止部分用戶繼續訪問,從而無法很好的將用戶引導到活動想要推廣的產品/品牌頁面,如 App 的下載頁面等。因此二維碼的掃描測試不能少。
5. 使用 Gulp 拼合圖片舉個例子,如果二維碼掃描結果是應用的下載地址的話,可以使用應用寶的微下載地址來生成二維碼,這是不會被“溫馨提醒”的。
如果打算先布局,后使用自動化工具(如:gulp-sprite-generator2)將圖片拼起來(即通過 css 生成精靈圖),減少請求數,需要注意:在編寫 CSS 的時候,圖片寬高應固定,圖片拼合后才能通過定位和顯示區域的寬高來展示圖片。
舉個例子,如果布局時 width: 100%; background-position: center;,使用工具拼合圖片后,該元素區域(100% 的寬度)內會將其他圖片顯示出來,這不是我們想要看到的。
建議先將圖片拼起來再布局,可以使用:gulp.spritesmith,一步獲取合并的精靈圖和對應的 css 文件。
2017-11-25 更新:推薦一個自制的 Electron 客戶端工具 Splice(集合了常用的 gulp 插件,包括上述的兩種精靈圖生成插件)。
6. 關于鏈接的分享-QQ補充兩個關于使用精靈圖的問題:
1.將多張圖片通過工具生成精靈圖和 css 文件:
如果你生成精靈圖時不小心使用了重復的圖片(文件夾里存在重復的圖片不同的名字),在手機上會出現圖片大小位置都出錯的情況,雖然電腦瀏覽器(Chrome)里正常。
解決:去掉那張重復的圖片重新生成一次精靈圖和 css 就好了。
2.直接通過 css 文件生成精靈圖:
制作手機端的活動頁面時,經常需要翻頁的效果,可以的話最好每個頁面的圖片拼成一張精靈圖(工具提供正則篩選圖片路徑的功能)。盡量不要將所有頁面的圖片統一拼成一張,如果你拼完沒問題也就算了,但是我這邊遇到過同上面第一點一樣的問題,手機上頁面效果出錯。
解決:最后排查不出問題,通過將多個頁面的圖片分成三張精靈圖才勉強度過難關。
如果將頁面鏈接直接復制分享給其他人,在手機上接收鏈接消息的用戶可能會看到鏈接的相關信息,如頁面標題、描述和圖片。相關信息設置方式如下:
QQ中鏈接的標題由此處獲取
可參考 手機QQ接口文檔:setShareInfo。
問題:即使使用了如上的 image 設置方法,還是沒能顯示預期圖片?
解決:確定下你發送的鏈接格式,會不會有所省略,如:somedomain/ 或者 somedomain/index,正確的應為 somedomain/index.html,才能正確解析到圖片。
如果是打開鏈接后,在QQ內置瀏覽器里選擇將頁面分享出去,那一般不會出錯。
7. 圖片壓縮使用自動化工具 gulp-imagemin(教程) 來壓縮圖片,效果舉例:101 KB => 80.7 KB。后來我使用了在線工具 Tinypng 又進行了一次壓縮,效果舉例:(上面使用 gulp-imagemin 壓縮過的圖片)80.7 KB => 38.1 KB,可見光使用自動化工具來壓縮是不夠的,大部分圖片仍存在較大的壓縮空間,可以再扔到 Tinypng 里壓縮一下看看。
8. Loading在線的 Tinypng 可以無限次使用,如果想要使用其 API 來進行壓縮自動化的話,可以使用 gulp-tinypng 等插件,但是有每月壓縮圖片數量限制,每月前500張圖片免費,其他收費情況參考官網說明。使用其 API 還需要獲取 API Key,這里可以獲取。
個人覺得想要免費的話使用 API 會有數量限制,時刻惦記著數量有點心累,不如直接使用在線工具,也不麻煩~
首屏 Loading,代碼段分享,拿走即用~
function loading(){ function Load(){} Load.prototype.loadImgs = function(urls,callback) { this.urls = urls; this.imgNumbers = urls.length; this.loadImgNumbers = 0; var that =this; for(var i=0;i9. CSS 動畫屬性前綴 webkit 使用 CSS3 來制作動畫效果的話,webkit 前綴一定記得加,要不然在某些手機下動畫效果是沒有的。
如下:-webkit-animation: f .8s 2s forwards ease-in-out; animation: f .8s 2s forwards ease-in-out; @-webkit-keyframes f { 0% { opacity: 0; -webkit-transform: translate3d(750px,0,0); transform: translate3d(750px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes f { 0% { opacity: 0; -webkit-transform: translate3d(750px,0,0); transform: translate3d(750px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } }推薦使用自動化工具來處理未加前綴的 CSS 文件,如 gulp-autoprefixer。
10. Swiper.js & Animate.css你只需要 Swiper.js 和 Animate.css 即可打造(簡單的)移動端 H5 活動頁面~
11. 使用 Meta 標簽進行頁面縮放
Swiper 是純 javascript 打造的滑動特效插件,面向手機、平板電腦等移動終端。
Animate.css 是純 CSS 編寫而成的動畫庫,包含多種常見的 CSS 動畫。
引用 Swiper.js,同時在 Animate.css 中尋找需要的動畫效果復制粘貼進 css 文件即可,完全不必引用 Animate.css。利用 meta 標簽對頁面進行縮放,使得我們可以直接根據設計稿來進行頁面的編寫,不用再進行單位的換算等等,省卻了很多麻煩。
12. 微信二維碼問題01:同一個頁面里要是有兩個二維碼,長按掃描總是只能掃出 左側/第一個 二維碼。
解決:可視區域內只能出現一個二維碼。02:使用 meta 標簽縮放頁面后長按二維碼圖片無反應。
解決:使用了以下代碼之后,就能長按識別二維碼了~< img style="right:0; top:0; height: auto;width: 100%;opacity: 0;position: absolute;" src="二維碼圖片地址"> < img src="二維碼圖片地址" title="qrcode" alt="qrcode">參考途牛Q2財報
2017年輕人花花花錢大報告
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/112779.html
摘要:本文適合的讀者現在在手淘,京東,今日頭條,美柚等過億用戶的手機中的,都常見網頁,他們有更新快,靈活,便于分享和傳播的特性。這里有他們中的幾個的例子手淘,美柚。 本文適合的讀者??????? 現在在手淘,京東,今日頭條,美柚等過億用戶的手機app中的,都常見h5網頁,他們有更新快,靈活,便于分享和傳播的特性。這里有他們中的幾個h5的例子:(手淘,美柚)。這些app中都嵌者數以百計,千計的...
摘要:本文適合的讀者現在在手淘,京東,今日頭條,美柚等過億用戶的手機中的,都常見網頁,他們有更新快,靈活,便于分享和傳播的特性。這里有他們中的幾個的例子手淘,美柚。 本文適合的讀者??????? 現在在手淘,京東,今日頭條,美柚等過億用戶的手機app中的,都常見h5網頁,他們有更新快,靈活,便于分享和傳播的特性。這里有他們中的幾個h5的例子:(手淘,美柚)。這些app中都嵌者數以百計,千計的...
摘要:本文適合的讀者現在在手淘,京東,今日頭條,美柚等過億用戶的手機中的,都常見網頁,他們有更新快,靈活,便于分享和傳播的特性。這里有他們中的幾個的例子手淘,美柚。 本文適合的讀者??????? 現在在手淘,京東,今日頭條,美柚等過億用戶的手機app中的,都常見h5網頁,他們有更新快,靈活,便于分享和傳播的特性。這里有他們中的幾個h5的例子:(手淘,美柚)。這些app中都嵌者數以百計,千計的...
閱讀 2423·2019-08-29 13:53
閱讀 2506·2019-08-29 11:32
閱讀 3047·2019-08-28 17:51
閱讀 3775·2019-08-26 10:45
閱讀 3491·2019-08-23 17:51
閱讀 2982·2019-08-23 16:56
閱讀 3335·2019-08-23 16:25
閱讀 3085·2019-08-23 14:15