!!!手机网页开发

 

乐视1s 屏幕:1080x1920  (实际显示:393x675)  safari4.0  2015-12-3

http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html    使用Flexible实现手淘H5页面的终端适配(里面有多种终端尺寸!)  2015-12-11

 

 

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-20

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

http://www.uis.cc/content-9-367-1.html   移动前端系列——移动端页面坑与排坑技巧  2015-10-21

http://www.cnblogs.com/PeunZhang/p/4517864.html   让H5适配移动设备全家(移动端适配)  2015-11-19

http://www.uis.cc/2015/11/27/Mobile-terminal-bug-summary/  移动端开发经验小结  2015-12-12

 

代码

<!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;}}

 

<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>

 

 

 

 

 

 

 

 

你可能感兴趣的:(!!!手机网页开发)