![](https://img-blog.csdnimg.cn/2019102922124749.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
移动端、兼容性、响应式
林中明月间。
努力又平庸 ,自卑又内敛 。
展开
-
JS判断是否为手机
原生js<script type="text/javascript"> if ( /AppleWebKit.*Mobile/i.test(navigator.userAgent) || /MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test( naviga转载 2021-04-10 22:33:33 · 1552 阅读 · 0 评论 -
移动端的点击事件
https://blog.csdn.net/qq_41614928/article/details/92058822一、基础事件1、PC端事件onclick 鼠标点击触发onmousedown 鼠标按下触发onmousemove 鼠标移动触发onmouseup 鼠标抬起触发2、移动端触屏事件ontouchstart 手指按下触发ontouchmove 手指移动触发onTouchend 手指抬起触发div.addEventListener('touchstart',funct转载 2021-03-21 21:09:02 · 3763 阅读 · 0 评论 -
软键盘将页面顶起来、收起未回落问题
链接:https://zhuanlan.zhihu.com/p/181212066软键盘将页面顶起来、收起未回落问题表现Android 手机中,点击 input 框时,键盘弹出,将页面顶起来,导致页面样式错乱。移开焦点时,键盘收起,键盘区域空白,未回落。产生原因我们在app 布局中会有个固定的底部。安卓一些版本中,输入弹窗出来,会将解压 absolute 和 fixed 定位的元素。导致可视区域变小,布局错乱。原理与解决方案软键盘将页面顶起来的解决方案,主要是通过监听页面高.转载 2020-08-14 12:12:15 · 2034 阅读 · 0 评论 -
iPhone X系列安全区域适配问题
链接:https://zhuanlan.zhihu.com/p/181212066表现头部刘海两侧区域或者底部区域,出现刘海遮挡文字,或者呈现黑底或白底空白区域。产生原因iPhone X 以及它以上的系列,都采用刘海屏设计和全面屏手势。头部、底部、侧边都需要做特殊处理。才能适配 iPhone X 的特殊情况。解决方案设置安全区域,填充危险区域,危险区域不做操作和内容展示。危险区域指头部不规则区域,底部横条区域,左右触发区域。具体操作为:viewport-fit m..转载 2020-08-14 12:10:58 · 1290 阅读 · 0 评论 -
Vue overflow在ios滚动不流畅问题
https://blog.csdn.net/mrhaoxiaojun/article/details/78647029https://blog.csdn.net/angularWQ/article/details/79244938https://blog.csdn.net/terryMei/article/details/83060117在 overflow:scroll部分,也就是...转载 2020-01-18 15:29:56 · 1269 阅读 · 0 评论 -
优惠券页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="js/rem.js"></script> <meta http-equiv="X-UA-Compatible" content="ie=edge...原创 2019-04-17 14:36:48 · 632 阅读 · 0 评论 -
h5 移动端一键导航(百度,腾讯,高德,苹果自带)地图
https://www.jianshu.com/p/eb1d63328df5转载 2019-04-28 18:26:12 · 10162 阅读 · 1 评论 -
bootstrap 响应式头部代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/boot...转载 2019-05-20 16:18:26 · 1257 阅读 · 0 评论 -
样式重置 css、reset.css
移动端:<style>*{margin: 0;padding: 0;}h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }h1...原创 2017-11-24 20:09:10 · 420 阅读 · 0 评论 -
前端提示框插件sweetalert
sweetalert是一款前端提示框插件,使用也非常简单,而且还内置了许多参数,他可以替代alert()本站即采用的该款插件提示,今天把使用方法提供给大家!1、引入JS和CSS文件可以直接进入官网下载然后到头部进入或者直接从CDN引入,需要引用jq<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1....转载 2019-03-28 20:44:56 · 1374 阅读 · 2 评论 -
移动端touch事件
<style>#box{ width: 200px; height: 200px; border: 1px solid #000;}</style></head><body><div id="box"></div> <script type="text/javascript&qu原创 2018-07-08 20:36:54 · 236 阅读 · 0 评论 -
网页自动适应手机端
判断是否为手机端 if (window.navigator.userAgent.toLowerCase().indexOf('mobile') == -1) {//-1 为PC端 1为移动端 }贴出代码 复制过去吧网站对移动设备友好,确保适当的绘制和触屏缩放:<meta name="viewport" content="width=device-width, in...原创 2017-11-10 11:09:32 · 5790 阅读 · 0 评论 -
如何查看微信页面的源代码
有一次做项目 叫我把手机微信上一个页面的源代码 给扒下来。好嘛,这个怎么搞呢。先是 想把链接发送到qq上面 打开。 显示请用微信客户端查看。这可怎么办?然后就百度 查资料。还在自己的手机上下载了一个叫做 view source的app 还是没用。 终于经过我的不懈努力。终于有点眉目。就口头教大家操作一下。第一步:在你的电脑上 打开微信登录网页版。扫码登录第二步:把你想看的网页......原创 2017-11-09 09:25:51 · 37096 阅读 · 7 评论 -
CSS适应不同的安卓手机
dpr:这个参数实际上量化了屏幕的物理分辨率和显示清晰度,比如iphone的DPR就是2,比一般的手机都要高。/*魅族*/@media only screen and (min-device-width:361px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio : 1){ /*奇葩安卓机(一般为这个)dpr统...原创 2018-03-08 14:19:28 · 2794 阅读 · 0 评论 -
解决苹果手机a标签点击背景,按钮颜色不兼容问题(发白)问题
a{ -webkit-tap-highlight-color:rgba(0,0,0,0); } input[type=button],input[type=submit],input[type=file],button{ cursor: pointer; outline:none;/*除边框*/ -webkit-appearance: none;/*消除按钮圆角*/ b...原创 2018-04-04 17:23:55 · 1544 阅读 · 0 评论 -
移动端苹果手机select兼容问题
select{ -webkit-appearance: none; }原创 2018-04-04 17:34:07 · 8315 阅读 · 2 评论 -
移动端关于select最佳兼容性解决方案(css)
<style>.button { border: 1px solid #bbb; border-radius: 1px; box-shadow: 0 1px 0 1px rgba(0,0,0,.04); width: 300px; background: #f3f3f3; background: -moz-linear-gradient...转载 2018-04-04 17:35:07 · 3841 阅读 · 0 评论 -
图片大小自适应、pc端、手机端
写页面的时候经常会遇到需要图片自适应容器大小这样的情况:<style>div{width:400px;height:400px;border:1px solid #000; }img{width:100%;height:100%;}</style>不管容器有多大,只要将img的宽高设置成100%(这里的100%是相对于父级宽高而言)就能自适应容器大小...转载 2018-01-12 16:51:24 · 24208 阅读 · 0 评论 -
手机h5页面唤起打电话、发邮件、发短信功能、QQ交谈
支持html5的浏览器在web页面里面实现拨打电话的功能<a href="tel:139xxxxxxxx">一键拨打号码</a><a href="mailto:yuojian@163.com">一键发送邮件</a><a href="sms:139xxxxxxx">一键发送短信</a>点击跳转qq聊天窗口&...转载 2018-04-28 12:23:29 · 4845 阅读 · 0 评论 -
页面响应式布局方法
先写好页面,头部加:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />再在浏览器 iphone6模式下修改样式@media all and (max-device-wid...原创 2018-05-28 12:07:55 · 1819 阅读 · 0 评论 -
响应式横排排列 对应class实例
首先引用bootsrap<!-- 响应式横排排列 对应class实例 --> <div class="container"> <!-- PC端一个一排 --> <ul class="row"> <li class="col-xs-12 col-sm-12 col-md-12">&l转载 2018-05-28 17:20:06 · 664 阅读 · 0 评论 -
bootstrap 基础
bootstrap 栅格系统流体布局:container-fluid //头部 宽度为1366px 全屏布局container:固定、1170、970、750、auto //固定 兄弟关系 宽度为1170px 中间布局.container 类用于固定宽度并支持响应式布局的容器。.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。两个都...原创 2018-06-11 16:16:53 · 343 阅读 · 0 评论 -
移动端布局js动态计算rem
推荐一篇文章:https://segmentfault.com/a/1190000012225828?utm_source=tag-newest适用Vue 移动端<script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orient...原创 2018-06-24 22:41:58 · 2388 阅读 · 1 评论 -
css判断iPhone样式
css 判断是iphone4s iphone5 加载不同样式1、@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */ .class{}}@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){...原创 2017-11-24 20:13:30 · 4628 阅读 · 0 评论