分类目录归档:WEB前端

多屏自适应的优缺点

不停有客户来问,多屏自适应的优点和缺点,近期进行了一些总结 优点 1.跨平台。
在手机,pad,电脑上均有的表现。

2.表现力一致
在不同的平台上看到的东西都是基本一致的,会让感觉体验良好。 是的这一个优点,就足够我们去努力做了。 2.一套底层代码,一套底层数据。不需要维护多个界面。比如我们要改用户昵称改成用户名称,只需要在一个界面上修改代码,只改一次。而如果我们做了移动版,ipad版,PC版,需要改3次 缺点 
1.单个页面的工时变长,一套代码的背后是多套图片和设计,因为需要一套代码适应多个屏幕,所以会有大量的编码工作。
 2.设计思想理解的不够深的情况下会感觉框架灵活性较差,UI上可发挥的空间比较小,会造成在一些局部耗费大量的时间进行推敲,比如 header footer的变化等。
 3.单个页面尺寸变大(可以用按需加载进行优化),可能会出现费流量,打开慢等情况。不过当前用户使用wifi访问占比比较高并无压力。 4.自由度低,局限性较大。
需要考虑在手机,pad,PC上三种屏幕下的页面内元素的呈现,会导致有着非常大的局限,需要根据业务做一个平衡选择。 
5.页面会比较大,在当前国内2G,3G网络下打开速度会比较慢。
由于响应式页面是同时下载多套CSS样式代码,可能在手机上就下载PC/pad的冗余代码,其实毫无意义,而且浪费了流量资源。
 6.对于非webkit内核的浏览器支持极差(IE6,7,8不支持)。
现在的IOS,Android都是webkit内核,至少在80%以上的手机上可以有良好的呈现。 综上,对于简单的页面,建议多屏自适应,对于表现复杂的页面,多套开发。

发表在 WEB前端 | 标签为 , , | 留下评论

ajax提交表单 浏览器记住密码功能失效

现在流行ajax提交表单,但是副作用是浏览器自动记住输入框内容的功能就失效了。 其实浏览器是通过submit这个动作来检测。那么我模拟一次form 的 submit就好了。 下面是两句核心代码 onsubmit="return false;"   <input type="submit" id="signin" /> 以前我们可能用 <input type="button" id="signin" /> 修改前,我们连form都不需要 <div class="block"> <label>登录用户名</label> <input type="text" id="loginName" value=""/> </div> <div class="block"> <label>密码</label> <input type="password" id="password" value="" /> </div> <div class="block"> <input type="button" id="signin" … 继续阅读

发表在 WEB前端 | 标签为 , , | 留下评论

bootstrap 入门

利用一些现有的框架,写东西,还是比较轻松的。 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title>   <!– Bootstrap –> <link href="css/bootstrap.css" rel="stylesheet">   <link href="css/ge.css" rel="stylesheet">   <!– HTML5 shim and Respond.js for IE8 support of HTML5 … 继续阅读

发表在 WEB前端 | 标签为 , | 2 条评论

jquery ajax get 一个url,超级简单

$("#btn1").click(function(){ var hangye = $("#hangye").val(); $.get("help.php?act=eall&hangye="+hangye,function(data,status){ $("#stocks").html(data); //alert("Data: " + data + "\nStatus: " + status); }); });

发表在 WEB前端 | 标签为 , , | 留下评论

jquery 遍历元素

jquery 操作的确简便了很多。不多有不少东西要学。 <input type="button" value="张三1" code="zs001" > <input type="button" value="张三2" code="zs002" > <input type="button" value="张三3" code="zs003" > $("#btn2").click(function(){   $("input[myatt='code']:button").each(function(){ var code = $(this).val(); alert(code); });       }); $(“input[myatt='code']:button”).each(function(){ 在each里分别执行,就好了。

发表在 WEB前端 | 标签为 , | 留下评论

Jquery 的 ajax 提交超级编辑器 POST 出错

var title = $(‘#title’).val(); var picture = $(‘#picture’).val(); var content = $(".nicEdit-main").html(); var id = $("#id").val();   var data = ‘title=’ + title + ‘&content=’ + content + ‘&id=’ + id + ‘&istop=’ + istop; if(picture != ”){ data += … 继续阅读

发表在 PHP, WEB前端 | 标签为 , , | 留下评论

ajax jquery post图片流给服务器进行图片上传

纯ajax 图片上传,ajax来post图片流给服务器。 FormData 可以把post数据改成流传输。 <form id="frm"> <div id="box2" style="margin:0px auto; width:100%; min-height:150px; background:#FF9"> <input type="file" name="file1" id="file1" /> <input type="button" value="上传" id="upload"> </form>   //ajax 上传 $("#upload").click(function(){ var url = "http://mm.com/ajaxupload.php";   var formData = new FormData($( "#frm" )[0]); $.ajax({ … 继续阅读

发表在 PHP, WEB前端 | 标签为 , , | 留下评论

html5如何在IOS下自动播放音乐

html5如何在IOS下自动播放音乐 在iphone所有平台包含最新的iphone6 plus,都有效 另外有B格的魅族里也同样有效。 但是基于微信里打开。 <audio preload="preload" controls id="car_audio" src="http://s882ddd.com/pinpai2/images/222.mp3" loop></audio> <script> setTimeout(function(){ $(window).scrollTop(1); },0); document.getElementById(‘car_audio’).play(); document.addEventListener("WeixinJSBridgeReady", function () { WeixinJSBridge.invoke(‘getNetworkType’, {}, function (e) { document.getElementById(‘car_audio’).play(); }); }, false); </script>

发表在 WEB前端 | 标签为 , , , | 2 条评论

微信分享朋友圈不显示小图片问题

发生背景: 微信sdk在2015.1.16发生一次版本升级。 分享的微信url无法看到小图片。 2015.1.20 某html5放在自己服务器的,分享到微信朋友圈,发现iphone下没有小图片 js 代码 var img=document.getElementById(“s2″).src; wx.onMenuShareTimeline({ title: “大寒迎暖春,快来测测春心吧! “+word, link: “http://s90.x-idea.com/dh/”, // 分享链接 //imgUrl: “http://41.xxk.com/wx/logo.png”, // 分享图标 imgUrl: img, success: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 } }); 1.如果直接使用imgUrl: “http://41.xxk.com/wx/logo.png”,这种方式,苹果下分享无法出现小图片,同事部分android无法显示 … 继续阅读

发表在 WEB前端 | 标签为 , , , | 一条评论

JS如何加载不影响网页速度

一般情况下我们都要求第三方js别影响自己的网站加载速度,哪怕他挂了,也别影响 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>   <div>TESTSTTST</div> <div id="sk"></div> <img src="1.jpg"> <img src="2.jpg"> <script type="text/javascript" src="1.js"></script>   </body> </html> 1.js的内容 document.getElementById(‘sk’).innerHTML = ‘<img src="3.jpg">’; Firefox里进行加载测试 我们将 <script type="text/javascript" src="1.js"></script> 改成 <script type="text/javascript">document.write(unescape("%3Cscript src=’1.js’ type=’text/javascript’%3E%3C/script%3E"));</script>

发表在 WEB前端 | 标签为 | 一条评论