乐视1s 屏幕:1080x1920 (实际显示:393x675) safari4.0 2015-12-3
http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html 使用Flexible实现手淘H5页面的终端适配(里面有多种终端尺寸!) 2015-12-11
https://segmentfault.com/a/1190000011586301 前端移动端适配总结 2017-10-22
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
http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/ 视区相关单位vw, vh..简介以及可实际应用场景(移动端单位vw、vh,下次要看!) 2016-6-29
一些大厂的框架: 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
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条军规 1、body上加上-vwebkit-overflow-vscrolling:touch 2、IOS尽量试用局部滚动 3、IOS引进ScrollFix避免出界 4、Android下尽量使用全局滚动 1)尽量不用voverflow:auto 2)使用min-height:100%代替vheight:100% 5、IOS下带有滚动条且position:absolute的节点不要设置背景色 */