!!!手机网页开发 - bjhhh

公告

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

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

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条军规
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的节点不要设置背景色
*/

posted on 2014-06-13 15:37 bjhhh 阅读(988) 评论(0) 编辑收藏举报

刷新页面返回顶部

21270

公告

代码

移动篇：

日记：

touch 事件 （Touch Event）

扩展阅读：

2015-10 手机网页开发2

2017手机网页

touch 事件（Touch Event）

2015-10　　手机网页开发2