移动端常见问题

移动端的页面多数情况下用百分比或者媒体查询来设置页面的宽高度 这样会达到响应的效果

这里解释几点

1.-webkit-tap-highlight-color: rgba(0,0,0,0);也可以写成-webkit-tap-highlight-color: transparent; 去掉点击时高光显示 你也可以更改里面的参数 达到你想要的点击显示高光效果

2.-webkit-touch-callout: none; //长按页面时不触发系统菜单

3.-webkit-user-select: none; //长按无法选择文本 这个很有用 一般如果body里面没有添加这个属性的手机页面 当我们长按某段文字的时候就会出现选中这段文字弹出“复制，全选”等选项 但在webapp开发里 这个就显得很不友好 所以尤其是在webapp开发的时候 为了达到与native一样的真实效果 必须的添加

4.html,body{ width: 100%; height: 100%;} 这个是整个文档的初始化宽高度 后面的子级都是按照这个数据设置

5.main和子级的height都设置为auto 你也可以不用设 但如果你的页面是允许滚动的话最好还是要设一下

6.我们把menu使用固定定位到页面底部 你也可以把他定位在顶部 或任何你想定位的地方

7.menu 里面的tab我们使用的是百分比分配 因为有border-right所以不能很准确的分配多少 这个应该会有什么更精准的方法平均分配 待研究(弹性盒模型)

时间： 2024-12-28 15:56:32

移动端常见问题的相关文章

转载-html5移动端常见问题

meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content=&

浅谈android Socket 通信及自建ServerSocket服务端常见问题

摘  要:TCP/IP通信协议是可靠的面向连接的网络协议,它在通信两端各建立一个Socket,从而在两端形成网络虚拟链路,进而应用程序可通过可以通过虚拟链路进行通信.Java对于基于TCP协议的网络通信提供了良好的封装,使用Socket对象代表两端的通信接口,通过Socket产生I/O流进行网络通信. 自建ServerSocket服务端时可能因PC与手机平板终端未接入同一路由器,因此无法访问服本地IP,可以尝试以下两种方式解决 关键词: Socket; ServerSocket;本地IP; ad

web移动端常见问题解决方案

Meta标签: <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> 这个想必大家都知道,当页面在手机上显示时,增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览. <meta content="te

Web移动端常见问题

一.按钮点击时出现黑色背景 解决方法: .class { -webkit-tap-highlight-color:rgba(0,0,0,0);} .class { -webkit-appearance: none; -webkit-tap-highlight-color: transparent;} 二.iOS中伪类:active失效 解决方法: $(function(){ document.body.addEventListener('touchstart', function () { })

移动端 常见问题整理

使用iScroll时,input等不能输入内容的解决方法 <script> function allowFormsInIscroll(){ [].slice.call(document.querySelectorAll('input, select, button')).forEach(function(el){ el.addEventListener(('ontouchstart' in window)?'touchstart':'mousedown', function(e){ e.sto

移动端常见问题总结

1.判断机型: // 判断手机是移动端还是安卓 var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 2.用scroll来解决ios唤起软键盘时absolute定位在最下方的元素错位: var bfscro

移动端常见问题汇总

原文转自: 点我 转过来,平时看看.虽然还有很多问题至今无解.比如:华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏.!! 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以苹果当初就把iPhone 4的960640分辨率,在网页里只显示了480320,这样devicePixelRatio＝2.现在andro

移动端常见问题（动画演示）

移动端动画 红色勾勾代表强烈推荐 transition实现动画案例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移动端动画</title> <meta name="viewport" content="width=device-width, initial-sca

移动端常见问题及解决方案

H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content="tele