移动web
文章平均质量分 65
一天一天积累
这个作者很懒,什么都没留下…
展开
-
手机网页制作的认识(有关meta标签)
近日以来一直在看JQuery Mobile 一个手机开发框架,说实话真的很头疼的~~~~ 因为里面有很多的属性、方法和事件~~~下面是手机网页的一些认识: 一、 网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放。 name="viewport" content="width=device-w转载 2014-12-15 14:38:51 · 638 阅读 · 0 评论 -
快速将pc和移动端网站合并成响应式网站
一、使用媒体查询加载不同css文件<link rel="stylesheet" type="text/css" href="m/css/style.css" media="screen and (max-width:800px)"><!--小于800px时加载移动端样式--><link rel="stylesheet" type="原创 2018-06-12 11:22:09 · 3284 阅读 · 0 评论 -
移动屏幕旋转解决方法
禁止用户屏幕旋转。这点可以肯定的说是做不到的,之前因为有项目需要禁止屏幕旋转,所以网上查阅了大量的资料,发现根本没有解决办法,在移动版webkit中根本做不到。苹果api也说明了,我们为了让用户在safari中正常的浏览网页,我们必须保证用户的设备处于任何一个方位时,safari都能够正常的显示网页内容(也就是自适应),所以我们禁止开发者阻止浏览器的orientationchange事件,原创 2016-04-19 11:48:36 · 4813 阅读 · 0 评论 -
针对iphone4调整样式
/*iphone4下兼容*/@media screen and (max-device-width:320px) and (max-device-height:480px){ .mplay{ position:fixed; }}这里的(max-device-width:320px) and (max-device-heigh原创 2015-09-17 16:02:57 · 357 阅读 · 0 评论 -
制作翻转效果动画
经测试改动画在移动端兼容有一些问题,要兼容移动端可前往https://blog.csdn.net/u012011360/article/details/92766950html页面:<div class="box start_3_1" title="点击翻面"> <img src="images/bg1.jpg" alt="纸牌正面" class...原创 2015-08-16 15:52:30 · 1175 阅读 · 0 评论 -
制作svg动画
要实现一步一步画出来一个图片,css3做不到吧,除非一张张的图片定时显示。想不到别的招了。现在用的是一个插件,做了一个svg动画。插件地址:http://lazylinepainter.info/先用AI做好路径,保存为svg格式的文件。使用插件,先引入需要的文件: window.jQuery || document.write('')demo如下:原创 2015-07-29 20:46:49 · 5280 阅读 · 0 评论 -
移动端select菜单无法修改默认样式
Volvo Saab Opel Audi但是在移动端,设置的样式会不起作用,如下图:因为ios和安卓系统有默认的菜单样式,要想设置自定义的样式,需要添加一个样式-webkit-appearance: none;之后再设置自定义的样式。如:原创 2015-06-15 14:21:29 · 2311 阅读 · 2 评论 -
h5播放音乐
h5音频播放,里面参数可以查看http://www.w3school.com.cn/html5/html_5_audio.asp Your browser does not support the audio tag.html部分: -->使用本地音乐 js效果:可以通过点击一张图片来控制音乐的播放和暂停 var sj_原创 2015-06-03 18:51:16 · 3368 阅读 · 0 评论 -
swiper实现触摸滑动
引入需要的文件 文件下载地址http://www.swiper.com.cn/download/index.html#file7使用divclass="swiper-container"> divclass="swiper-wrapper"> divclass="swiper-s原创 2015-06-02 16:01:54 · 5198 阅读 · 0 评论 -
使用touch-punch.js实现移动端的拖放效果
一、下载文件并引入下载地址:http://touchpunch.furf.com/引入:这里可以查看参数http://www.cnblogs.com/ganqiyin/archive/2013/12/12/3471622.html二、使用html部分:原创 2015-05-15 12:17:34 · 8047 阅读 · 1 评论 -
hammer实现拖拽旋转缩放功能
效果: 首先下载hammer插件http://hammerjs.github.io/html部分:<script type="text/javascript" src="js/hammer.min.js"></script> <div class="resultCon"> <p>人景合成图:&原创 2018-12-04 11:27:48 · 3372 阅读 · 1 评论