移动端
小糖子先森
我生来平庸.也生来骄傲.
展开
-
移动端开发注意问题
1、防止手机中网页放大和缩小,这点是最基本的,最为手机网站开发者来说应该都知道的,就是设置meta中的viewport使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale...原创 2018-04-20 14:17:54 · 316 阅读 · 0 评论 -
input文本框设置100%宽度在ios上显示滚动条
1.移动端宽度设置100%,在模拟器,pc,安卓手机上没问题,在苹果手机就会多出一截来效果很不好。2.它还会有点padding-left,如果清除设置0即可或者设置你需要的值,大小不会叠加。处理方式:box-sizing: border-box;正常效果:默认效果 :...原创 2019-05-08 15:16:58 · 939 阅读 · 0 评论 -
关于键盘抬起遮盖输入框问题
1.如果body内含有输入框元素的父级没有加ovfloaw:scroll;点击输入框安卓苹果下页面会自动滚动。2.如果body内含有输入框元素的父级加了ovfloaw:scroll;击输入框ios下页面会自动滚动。安卓下则不会就会把输入框挡住需要加js手动控制↓window.addEventListener("resize", function() {if(document.activ...转载 2019-04-02 09:54:10 · 378 阅读 · 0 评论 -
移动端键盘键盘抬起问题布局出现问题
关于移动端手机键盘抬起布局会被挤压上来,解决两个小方法:<script type="text/javascript">方法一:$(function() { //输入框聚焦隐藏挤压内容,失去焦点显示挤压内容 /*$('input').focus(function(){ $('.ico_list').hide(); }) $("input").blur(...原创 2018-03-28 10:47:52 · 1202 阅读 · 0 评论 -
判断移动端开发终端是安卓还是苹果
<script type="text/javascript"> var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)? C...转载 2018-04-20 14:23:32 · 908 阅读 · 0 评论 -
移动端ios中active无效
方法一:body添加ontouchstart<body ontouchstart="">方法二:js给 document 绑定 touchstart 或 touchend 事件<style>a { color: #000;}a:active { color: #fff;}</style><a herf=foo >b...原创 2018-09-11 11:25:36 · 911 阅读 · 0 评论 -
js监听微信浏览器返回按钮事件
pushHistory(); window.addEventListener("popstate", function(e) { alert("好嗨哟,感觉到达了人生巅峰!");//根据自己的需求实现的功能 }, false); function pushHistory() { var state = { title: "title", ...转载 2019-01-08 15:44:47 · 5083 阅读 · 2 评论 -
微信浏览器缓存问题
方法1--在代码头部加以下meta标签<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expire原创 2018-09-20 08:02:02 · 2942 阅读 · 0 评论 -
微信ios上下拉网页禁止
在微信网页上总是可以上拉下拉,如下图:有的时候在一个页面当中里面有列表可以滚动的上下滑动总是有点影响的,如下图:一开始使用document的touchmove事件禁止,但是页面上所有滑动都无效了。document.querySelector('body').addEventListener('touchmove', function(e) { e.preventDef...原创 2018-05-23 17:07:41 · 4506 阅读 · 0 评论 -
移动端开发需要注意
1、防止手机中网页放大和缩小,这点是最基本的,最为手机网站开发者来说应该都知道的,就是设置meta中的viewport使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-s...原创 2018-11-23 21:30:14 · 531 阅读 · 0 评论 -
移动端适配方案
百分比适配。(宽度百分比,高度固定)viewport适配。(将所有屏幕都设置为targetW)(function(){var w = window.screen.width;var targetW = 320;var scale = w/targetW; //当前尺寸/目标尺寸var meta = document.createElement("meta");meta.name ...原创 2018-09-28 11:11:47 · 155 阅读 · 0 评论 -
微信公众号开发,移动端开发遇到的问题及其他技巧
以下是自己遇到的一些坑,根据查资料得到的一些方法。1、防止手机中网页放大和缩小,这点是最基本的,最为手机网站开发者来说应该都知道的,就是设置meta中的viewport使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。<meta name="viewport" content="width=device-width, ...原创 2018-09-12 14:44:06 · 2208 阅读 · 1 评论 -
微信关闭当前网页事件
微信端网页点击按钮关闭当前网页,使用h5一些方法在微信内置浏览器是无效的。以下方法奏效<div class="footer_bottom"> <a href="javascript:void(0);" id="closeWindow">关闭网页</a></div><script> document.addEve...转载 2019-06-04 10:22:56 · 1141 阅读 · 0 评论