移动端、兼容性、响应式
关注
分享
扫一扫
文章平均质量分 53
林中明月间。
努力又平庸 ，自卑又内敛 。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
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 · 1605 阅读 · 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 · 3996 阅读 · 0 评论 -
软键盘将页面顶起来、收起未回落问题
链接：https://zhuanlan.zhihu.com/p/181212066软键盘将页面顶起来、收起未回落问题表现Android 手机中，点击 input 框时，键盘弹出，将页面顶起来，导致页面样式错乱。移开焦点时，键盘收起，键盘区域空白，未回落。产生原因我们在app 布局中会有个固定的底部。安卓一些版本中，输入弹窗出来，会将解压 absolute 和 fixed 定位的元素。导致可视区域变小，布局错乱。原理与解决方案软键盘将页面顶起来的解决方案，主要是通过监听页面高.转载 2020-08-14 12:12:15 · 2312 阅读 · 0 评论 -
iPhone X系列安全区域适配问题
链接：https://zhuanlan.zhihu.com/p/181212066表现头部刘海两侧区域或者底部区域，出现刘海遮挡文字，或者呈现黑底或白底空白区域。产生原因iPhone X 以及它以上的系列，都采用刘海屏设计和全面屏手势。头部、底部、侧边都需要做特殊处理。才能适配 iPhone X 的特殊情况。解决方案设置安全区域，填充危险区域，危险区域不做操作和内容展示。危险区域指头部不规则区域，底部横条区域，左右触发区域。具体操作为：viewport-fit m..转载 2020-08-14 12:10:58 · 1432 阅读 · 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 · 1334 阅读 · 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 · 766 阅读 · 0 评论 -
h5 移动端一键导航（百度，腾讯，高德，苹果自带）地图
https://www.jianshu.com/p/eb1d63328df5转载 2019-04-28 18:26:12 · 10358 阅读 · 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 · 1310 阅读 · 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 · 469 阅读 · 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 · 1478 阅读 · 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 · 285 阅读 · 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 · 5901 阅读 · 0 评论 -
如何查看微信页面的源代码
有一次做项目 叫我把手机微信上一个页面的源代码 给扒下来。好嘛，这个怎么搞呢。先是 想把链接发送到qq上面 打开。 显示请用微信客户端查看。这可怎么办？然后就百度 查资料。还在自己的手机上下载了一个叫做 view source的app 还是没用。 终于经过我的不懈努力。终于有点眉目。就口头教大家操作一下。第一步：在你的电脑上 打开微信登录网页版。扫码登录第二步：把你想看的网页......原创 2017-11-09 09:25:51 · 38134 阅读 · 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 · 2882 阅读 · 0 评论 -
移动端苹果手机select兼容问题
select{ -webkit-appearance: none; }原创 2018-04-04 17:34:07 · 8374 阅读 · 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 · 3894 阅读 · 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 · 24625 阅读 · 0 评论 -
手机h5页面唤起打电话、发邮件、发短信功能、QQ交谈
支持html5的浏览器在web页面里面实现拨打电话的功能<a href="tel:139xxxxxxxx">一键拨打号码</a><a href="mailto:[email protected]">一键发送邮件</a><a href="sms:139xxxxxxx">一键发送短信</a>点击跳转qq聊天窗口&...转载 2018-04-28 12:23:29 · 5205 阅读 · 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 · 1993 阅读 · 0 评论 -
bootstrap 基础
bootstrap 栅格系统流体布局：container-fluid //头部 宽度为1366px 全屏布局container:固定、1170、970、750、auto //固定 兄弟关系 宽度为1170px 中间布局.container 类用于固定宽度并支持响应式布局的容器。.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。两个都...原创 2018-06-11 16:16:53 · 384 阅读 · 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 · 2756 阅读 · 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 · 4746 阅读 · 0 评论