!!!手機網頁開發

時間  2019-11-12
標籤 手機 網頁 開發 欄目 HTML 简体版
原文   原文鏈接

 

樂視1s 屏幕：1080x1920　　（實際顯示:393x675）　　safari4.0　　2015-12-3javascript

http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html　　　　使用Flexible實現手淘H5頁面的終端適配（裏面有多種終端尺寸！）　　2015-12-11css

https://segmentfault.com/a/1190000011586301　　前端移動端適配總結　　2017-10-22html

 

 

http://www.bootcdn.cn/fastclick/ 　　github上有一個叫作fastclick的庫，它也能規避移動設備上click事件的延遲響應（有時間再看）https://github.com/ftlabs/fastclick　　2015-10-15前端

http://www.cnblogs.com/mofish/p/4332937.html 　　手機網頁字體　　2015-10-20html5

http://ued.taobao.org/blog/2013/05/rem-font-size/ 　　REM 字體　　2015-10-20java

http://www.uis.cc/content-9-367-1.html 　　移動前端系列——移動端頁面坑與排坑技巧　　2015-10-21jquery

http://www.cnblogs.com/PeunZhang/p/4517864.html 　　讓H5適配移動設備全家(移動端適配)　　2015-11-19ios

http://www.uis.cc/2015/11/27/Mobile-terminal-bug-summary/　　移動端開發經驗小結　　2015-12-12git

http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/　　視區相關單位vw, vh..簡介以及可實際應用場景（移動端單位vw、vh，下次要看！）　　2016-6-29github

 

一些大廠的框架：　　2016-4-28

微信的WeUI　　https://github.com/weui/weui

淘寶的SUI　　http://m.sui.taobao.org/

百度的GMU　　http://gmu.baidu.com/

還有百度的EFE　　http://efe.baidu.com/#mobile

豆瓣的CardKit　　https://github.com/dexteryy/CardKit

手機端的ui框架，推薦使用mui　　http://dev.dcloud.net.cn/mui/　　2017-12-22

 

代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="pragma" content="no-cache" />
</head>
<body>
<h1>手機網頁</h1>
</body>
</html>

 

webkit內核中的一些私有的meta標籤，這些meta標籤在開發webapp時起到很是重要的做用
(1)<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />
(2)<meta content="yes" name="apple-mobile-web-app-capable" />
(3)<meta content="black" name="apple-mobile-web-app-status-bar-style" />
(4)<meta content="telephone=no" name="format-detection" />
第一個meta標籤表示：強制讓文檔的寬度與設備的寬度保持1:1，而且文檔最大的寬度比例是1.0，且不容許用戶點擊屏幕放大瀏覽；尤爲要注意的是content裏多個屬性的設置必定要用分號+空格來隔開，若是不規範將不會起做用。
第二個meta標籤是iphone設備中的safari私有meta標籤，它表示：容許全屏模式瀏覽；
第三個meta標籤也是iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式；
第四個meta標籤表示：告訴設備忽略將頁面中的數字識別爲電話號碼

 

 http://segmentfault.com/a/1190000002407912 　　[擴展閱讀] 經常使用meta整理

 

 

 

 

 

 

 

移動篇：

//window.devicePixelRatio是設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。
//公式表示就是：window.devicePixelRatio = 物理像素 / dips
var a=window.devicePixelRatio;

 [擴展閱讀]： http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/ 　　設備像素比devicePixelRatio簡單介紹

 

媒體查詢—— 手機：

@media screen and (min-width:720px){ .zxlc-head {height:345px;}}
@media screen and (max-width:720px){ .zxlc-head {height:345px;}}
@media screen and (max-width:540px){ .zxlc-head {height:258px;}}
@media screen and (max-width:360px){ .zxlc-head {height:172px;}}
@media screen and (max-width:320px){ .zxlc-head {height:153px;}}

媒體查詢——PC：

@media screen and (min-width:1024px){ .nav-bottom {height:27px;}}
@media screen and (max-width:1280px){ .nav-bottom {height:36px;}}
@media screen and (max-width:1440px){ .nav-bottom {height:40px;}}

媒體查詢的一個小例子：　　2016-6-16

平時是top:20px， 屏幕小於370寬度後， top:0（以370px爲分界：小於370px的，top:0。 大於370px的，top:20px）

<style>
.zhaoji-box .txtbox{position:absolute;width:47%;left:53%;top:20px;z-index:1;}
@media screen and (max-width:370px){
    .zhaoji-box .txtbox{top:0;}
}/*平時是top:20px， 屏幕小於370寬度後， top:0*/
</style>
<div class="zhaoji-box">
    <img src="images/zhaoji_bg.jpg" class="zhaoji-bg">
    <div class="txtbox">1111</div>
</div>

 

 

<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="css479.css" /> 　　示例代碼表明當當前屏幕寬度小於479px的時候，加載testcssbywidth1.css文件來渲染頁面。

CSS中直接設置：
@media screen and (max-width:479px) {
　　/* 具體的CSS屬性設置 */
}

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi=device-dpi"> （強制顯示真實分辨率大小）

width=device-width：控制viewport的寬度，能夠指定固定的值或者特殊的值，如device-width（設備寬度）。可是這個麼設置有一個弊端，由於這個設置只有在豎屏狀態下有效，橫屏狀態下，返回的卻仍是和豎屏狀態下同樣的寬度。
initial-scale=1.0：告訴瀏覽器初始化頁面時不要對頁面進行任何縮放的操做。
maximum-scale=1.0：告訴瀏覽器阻止頁面放大，可是這樣一來也禁止了用戶手動放大或縮小頁面，怎麼說呢，美好的東西也會存在缺陷吧。
minimum-scale=1.0：告訴瀏覽器阻止頁面縮小，一樣帶來上面的問題。
user-scalable=no：告訴瀏覽器禁止頁面縮放。
target-densitydpi=device-dpi：分辨率的設置，一般能夠取值：device-dpi（使用設備自身的dpi做爲目標dp，不發生縮放）、high-dpi（使用高分辨率，中低分辨率場景下會相應縮小）、medium-dpi（使用中等分辨率，高低分辨率分別進行相應的放大和縮小，缺省值）、low-dpi（使用低等分辨率，中高分辨率相應放大）。
經過對viewport的設置，利用Media Queries的屬性設置，你就能夠作出響應式的Web頁面。下面開始一步一步告訴你響應式Web設計怎麼開始的：
容許網頁寬度自動調整：
就是在網頁的中追加viewport meta的定義。
選取一個標準開發出具體頁面：
好比一個頁面被要求對屏幕寬度爲320px、480px、640px的三種場景下進行響應式設計，這個時候正常會選取320px下的標準先進行頁面開發。
抽取最低標準下的CSS樣式獨立成外鏈樣式文件：
將320px下的CSS樣式所有抽取成外鏈樣式文件，響應式設計的頁面HTML代碼中，不要有任何CSS定義的代碼。
根據UEDMMs的視覺稿進行其餘標準的CSS樣式文件開發。
經過Media Queries屬性設置來定義不一樣場景下加載不一樣的CSS樣式文件。
http://blog.csdn.net/iamjiuye/article/details/11608927

 

 

 

適應高分辨率大屏手機的方法：

按照540px寫網頁。再加一句（可自動縮放）：

//適應高分辨率手機
$(window).on("resize load",function(){
    $("body").css("zoom", $(window).width() / 540);
    $("body").css("display" , "block");
});

 

 

【旁白】
這段時間在作應用中嵌入網頁，被嵌入的網頁總被縮放，很是煩惱。
讓安卓工程師加上此句後：webSettings.setSupportZoom(false); 仍舊仍是被縮放。（好比540寬的手機，觀看網頁時頁面寬度是345px）——繼續煩惱!

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi=device-dpi"> （ 加上這句 target-densitydpi=device-dpi 可強制顯示真實分辨率大小）
頁面全部字號大小，都只按照某一寬度的來作。   好比設計圖頁面寬度540的，就都按540px切圖作頁面，不考慮其它分辨率的自適應。
再加上下面這段代碼，而後全部不一樣分辨率的手機，都按540px縮放：
$(window).bind('resize load', function(){
  $("body").css("zoom", $(window).width() / 540);
  $("body").css("display" , "block"); }); 
就解決了大屏手機高分辨率下，字體太小的問題。並且切圖時也不用考慮多種分辨率的不一樣css，通通按只支持540px的作就足矣！

 var screenWidth=$(document).width();

 

日記：

前一段時間作手機網頁，被嵌入到安卓和IOS中。上文所述的強制用js縮放的方法行不通，還得靠webview本身的縮放。

由於有不少手機的 視網膜不是1，像IOS的iphone4s是2，就是說，640x960，但實際頁面像素寬度是320x480 

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    .header{}
}
window.devicePixelRatio

因此META頭改爲這樣了：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="pragma" content="no-cache" />

 

請提供ios開發須要的
app的圖標和啓動圖片，單位是像素
圖標 ：29x29 57x57 58x58 80x80 114x114 120x120
啓動圖 ：320x480 640x960 640x1136

 

touch 事件  （Touch Event）

http://www.w3.org/TR/touch-events/#list-of-touchevent-types  　　W3C（Touch Event）標準文檔      2013-10-10 發佈

touchstart 觸摸開始（手指放在觸摸屏上）
touchmove 拖動（手指在觸摸屏上移動）
touchend 觸摸結束（手指從觸摸屏上移開）
touchcancel 是在拖動中斷時候觸發

interface Touch {
      readonly    attribute long        identifier;
      readonly    attribute EventTarget target;
      readonly    attribute long        screenX;
      readonly    attribute long        screenY;
      readonly    attribute long        clientX;
      readonly    attribute long        clientY;
      readonly    attribute long        pageX;
      readonly    attribute long        pageY;
  };

 

$("#screen").on("touchstart",function(e){
    console.log(e.originalEvent);
});

 

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#abc").bind("touchstart",function(){
        console.log("touchstart");
    });
    $("#abc").bind("touchend",function(){
        console.log("touchend");
    });
    $("#abc").bind("touchmove",function(){
        console.log("touchmove");
    });
    $("#abc").bind("touchcancel",function(){
        console.log("touchcancel");
    });
});
</script>

 

http://www.w3cplus.com/source/jquery-plugins-that-handle-touch-events-43-items.html 　　43個處理觸摸事件的jQuery插件（看第13條）

https://github.com/furf/jquery-ui-touch-punch 　　第13條：jquery-ui-touch-punch

http://www.cnblogs.com/lilyimage/p/3951016.html 　　touch.js　　

 

 

擴展閱讀：

http://www.iteye.com/news/26171　　　　Phone 5/iOS 6 前端開發指南　　2014-6-24

http://www.w3cplus.com/css/towards-retina-web.html　　走向視網膜　　2014-6-24

http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/　　　　設備像素比devicePixelRatio簡單介紹　　2014-6-24

http://xiaofengyu.iteye.com/blog/1973764　　　　HTML5移動開發技術要點總結及各事件含義　　2014-6-24

http://blog.csdn.net/heavensoft/article/details/37920595 　　讓HTML5達到原生的體驗 系列之一 避免切頁白屏　　2014-7-23

http://blog.163.com/xz551@126/blog/static/821257972012722112636769/ 　　wap頁面手機網站觸屏事件 按下 鬆開 滑動

http://www.vipaq.com/Article/View/blog/390.html 　　移動web開發，12個觸摸及多點觸摸事件經常使用Js插件

http://www.cnblogs.com/lecaf/archive/2011/08/01/2123593.html 　　JS新API標準 地理定位（navigator.geolocation）

https://github.com/madrobby/zepto/tree/master/src 　　Zepto  　　2014-09-10

http://www.cnblogs.com/leizhenzi/archive/2011/06/29/2093636.html 　　Android中webview和js之間的交互

http://www.genymotion.cn 　　genymotion模擬器

 

關於phoneGap

build.phonegap.com

http://www.phonegap100.com/ 　　phonegap中文網

 

  

 

2015-10　　手機網頁開發2

<meta name="full-screen" content="yes"><!-- UC強制全屏 -->
<meta name="x5-fullscreen" content="true"><!-- QQ強制全屏 -->
<meta name="browsermode" content="application"><!-- UC應用模式 -->
<meta name="x5-page-mode" content="app"><!-- QQ應用模式 -->

頁腳三按鈕實例：

<style type="text/css">
body {
    min-width: 320px;
    font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
    color: #000;
    background: #f2f2f2;
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: none;
    -moz-user-select: none;
}
article, aside, footer, header, hgroup, main, nav, section {display: block;}
.tool-box {padding-bottom: 5px;border-top: 1px solid #CCCCCC;text-align: center;}
.tool-cn {margin-bottom: 5px;height: 49px;background-color: #fff;border-bottom: 1px solid #c2c2c2;text-align: center;overflow: hidden;}
.tool-cn a {position: relative;float: left;padding-top: 26px;color: #333;font-size: 12px;}

.tool-cn a:before{background: url(http://webresource.c-ctrip.com/ResCRMOnline/R5/html5/images/un_ico_home_v66.png) no-repeat 0 0;background-size: 104px 326px;}
.tool-cn a:before {content: "\0020";position: absolute;top: 7px;left: 50%;margin-left: -8px;width: 16px;height: 17px;}

.tool-cn a.link-1 {width: 38%;}
.tool-cn .link-1:before {background-position: -60px -153px;}

.tool-cn a.link-2 {width: 32%;}
.tool-cn .link-2:before {background-position: -60px -173px;}

.tool-cn a.link-3 {width: 30%;text-indent: 4px;}
.tool-cn .link-3:before {width: 18px;height: 18px;background-position: -60px -308px;}
</style>

<footer class="tool-box">
<div class="tool-cn">
    <a  href="tel:00000" class="link-1" rel="nofollow">電話預訂</a>
    <a  href="http://m.ctrip.com/m/c67" class="link-2" rel="nofollow">下載客戶端</a>
    <a  href="/webapp/myctrip/" class="link-3" rel="nofollow"><i></i>我 的</a>
</div>
</footer>

 

移動端fixed佈局的解決方案：　　2016-6-4

.main{
/*絕對定位，進行內部滾動*/
position:absolute;
top:50px;bottom:34px;overflow-y:scroll;/*使之能夠滾動*/
-webkit-overflow-scrolling:touch;/*增長該屬性，能夠增長彈性*/
}

 

最全面總結 Android WebView與 JS 的交互方式　　2017-4-5

http://blog.csdn.net/carson_ho/article/details/64904691　　

 

2017手機網頁

彈性滾動　　2017-4-16

將屬性掛在body上，body下的全部子節點都會繼承這個屬性，而且還能夠避免不少奇怪的bug。

body是自帶彈性滾動的，但單獨的DOM節點沒有自帶彈性滾動。滾動時會比較生澀

body{-webkit-overflow-scrolling:touch;}
.scroll-el{overflow:auto;}/*局部滾動的dom節點*/

 IOS什麼狀況下會觸發出界：

全局滾動：滾動到頁面頂部（或底部）時，繼續向下（向上）滑動，就會出現；
局部滾動：滾動到頁面頂部（或底部）時，再繼續向下（向上）滑動，就會出現；

Android下建議只使用全局滾動。作局部滾動會致使滾動不流暢和滾動條的異常 

/*流暢滾動的N條軍規
一、body上加上-vwebkit-overflow-vscrolling:touch
二、IOS儘可能試用局部滾動
三、IOS引進ScrollFix避免出界
四、Android下儘可能使用全局滾動
1)儘可能不用voverflow:auto
2)使用min-height:100%代替vheight:100%
五、IOS下帶有滾動條且position:absolute的節點不要設置背景色
*/
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程