html5
文章平均质量分 53
、不知不觉、
这个作者很懒,什么都没留下…
展开
-
writing-mode、flex实现css多列布局,从上到下,从左到右
需求: 实现list从上到小排列,一列三行;余下的另起一列。效果直接运行html<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>多列布局</title> <style> .container { writing-mode: vertical-lr; .原创 2021-06-28 17:13:23 · 1420 阅读 · 1 评论 -
html,让页面滚动到指定位置
做了一个列表,根据字母a-z的顺序排序,并且在页面右边使用fixed定位显示a-z,点击字母,列表滚动到相应的的位置,如图: 滚动部分的js代码如下:let obj = document.getElementById(id)let oPos = obj.offsetTop - (50*document.documentElement.clientWidth/375);document原创 2018-01-27 15:13:04 · 12545 阅读 · 0 评论 -
css小技巧:表单的label在字体个数不同的时候,让字体间距相等
html结构 <ul> <li><label>姓名</label></li> <li><label>身份证</label></li> <li><label>手机号码&am转载 2018-01-20 14:46:32 · 945 阅读 · 0 评论 -
网页调试vconsole和eruda
方法一:vconsole 预览地址:https://www.w3cways.com/demo/vconsole/ 官方文档:https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md使用方式: 在header里引入此js&lt;head&gt; &lt;script src="https://www.w3cw...原创 2018-07-17 15:29:35 · 8338 阅读 · 0 评论 -
css实现transform实现tabbar跟随动效
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8&gt; &lt;meta name=viewport content="width=device-width,initial-scale=1,minimum-scal原创 2018-07-23 14:19:12 · 2371 阅读 · 0 评论 -
canvas将图片转成base64
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;canvas将图片转base64&lt;/title&gt;转载 2018-07-19 20:26:04 · 18381 阅读 · 1 评论 -
vue里transition实现动画,在ios10.3上无效;打包后低版本安卓系统webview动画失效
页面有个弹窗,我要实现的效果就是弹窗从底部滑上来,并伴随轻微的抖动效果。 HTML部分:&amp;amp;lt;transition name=&amp;quot;bounce&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;my-popup&amp;quot; v-show=&amp;quot;showPo原创 2018-07-25 13:08:09 · 4160 阅读 · 0 评论 -
css设置滚动条样式,隐藏滚动条
css部分/* 横向滚动容器 */.scroll-wrapper { width: 100%; overflow-x: auto; height: 22px; white-space: nowrap; display: flex; -webkit-overflow-scrolling: touch;}.scroll-wrapper span...原创 2018-08-06 15:11:17 · 4730 阅读 · 2 评论 -
安卓上文字垂直居中解决方案
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalab转载 2018-10-31 18:09:49 · 5087 阅读 · 0 评论 -
(使用Mac+iphone)调试网页
1.mac上打开Safari浏览器,在“Safari-偏好设置-高级”里面勾选,在“菜单中显示开发中菜单”,如图: 2.使用数据线连接iphone和电脑,并确保手机safari里打开了web检查器(开启方式:设置-safari-高级-打开web检查器) 3.在手机上使用safari打开h5页面,然后点击电脑上safari浏览器的“开发”菜单,下拉的列表会出现你的手机的名字,鼠标点上去,会出原创 2018-01-23 15:36:39 · 10052 阅读 · 2 评论 -
记录一下开发过程中遇到的一些让人纠结的bug
iphone6p或者iphone7p上给swiper-container设置overflow-y:auto,界面出来后不到1s马上消失.swiper-container{ overflow-y:auto}解决办法:给slider元素设置overflow-y:auto即可。原创 2017-11-28 16:59:20 · 467 阅读 · 0 评论 -
html 发送短信并且带编辑好的内容
send androidsend ios原创 2016-05-18 15:45:23 · 2520 阅读 · 0 评论 -
使用百度地图定位当前城市,在浏览器中可以,但是在安卓webview中定位失效
使用百度地图,定位当前所在城市,发现在浏览器中,定位很快,但是把html页面放到webview中,就一直定位不到坐标function getCurPosition() { var error_msg ; var geolocation = new BMap.Geolocation(); var gc = new BMap.Geocoder(); geolocation.getCurrent原创 2016-07-29 10:03:52 · 11905 阅读 · 6 评论 -
html5 ,css3, js 一些要很实用的代码片
禁止input控件输入空格,input输入身份证号码,input输入电话号码input只能输入数字和点text-align:right在Android4.4(或某些浏览器下)以下,placeholder无法居右html唤起手机QQ原创 2016-06-12 10:21:20 · 2010 阅读 · 0 评论 -
ios实现点击复制文字到剪贴板
移动端点击复制文字到剪贴板:html代码:复制我到剪贴板点击复制复制文字的代码需要放在点击事件中js代码:$("#button").click(function(){ if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { //ios var copyDOM = document.query原创 2017-02-09 09:55:26 · 16242 阅读 · 6 评论 -
解决安卓上底部使用fixed布局,键盘弹出后fixed部分的内容挡住form表单的情况
今天写了一个登录,但是登录按钮是固定在页面最底部。这种布局下,ios手机上是没问题的,但是在安卓手机上,键盘弹出后,登录按钮会挡住form表单。原因就是,ios手机在键盘弹出后,页面高度不会发生变化的,但是安卓手机上键盘弹出后,页面高度 = 原始高度- 键盘高度。解决办法:由于无法获取键盘高度,所以只能监听页面高度变化,在发生变化的时候,改变登录按钮的定位方式。将fixed改为static原创 2017-04-28 15:30:19 · 10323 阅读 · 0 评论 -
MUI踩过的一些坑
1使用了下拉刷新后 这里面的内容,所有的a标签都的href都无法正常跳转,div,span,a ,i 等等这些标签里面的onlick 事件和 click 都无法执行。只有在button上面绑定click事件是可以执行的,或者绑定mui的tap事件。mui.ready(function() { mui(document).on('tap','#call',function(){原创 2017-04-18 10:15:26 · 10522 阅读 · 0 评论 -
安卓手机利用html5 ,video+canvas从视频流里面截图拍照
HTML5 GetUserMedia Demo var video = document.querySelector('video'); var audio, audioType; var canvas1转载 2017-05-16 10:19:59 · 4739 阅读 · 2 评论 -
使用flex布局解决安卓手机上固定在底部的按钮,在键盘弹起后挡住input输入框的问题
移动端经常会出现,一个表单里面,确定按钮固定在底部这样的布局,一般会让按钮absolute或者fixed,这样在ios上没有问题,但是在安卓手机上,当表单里面的input输入框获得焦点的时候,按钮会挡在表单上,影响美观。这个可以采用flex布局完美解决。HTML代码 这里面是input输入框等。。。。 提交 css代码html,body{p原创 2017-05-27 15:00:05 · 15928 阅读 · 0 评论 -
jsBridge与安卓,ios
jsbridge与安卓,ios通信原创 2017-06-22 14:07:56 · 2508 阅读 · 9 评论 -
html5去掉元素交互时出现的背景色
在手机浏览器上事件交互会出现背景色,设备浏览器不一样,颜色也不一样,很是影响交互效果。使用css3来解决代码如下:-webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none;-moz-user-focus: none;-moz-user-select: none;转载 2016-03-04 11:53:25 · 1486 阅读 · 0 评论