移动端
front_end_fan
互联网公司缺的是技术过硬又精通业务的工程师,缺的是真正能解决实际业务问题的人,缺的是复合型的人才。
展开
-
手机浏览器javascript事件及css总结
1. viewport:也就是可视区域。对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域,这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;实际上我们可以操作的属性有4 个:[html] view plain copy print?width - // viewp转载 2017-08-18 14:49:22 · 1053 阅读 · 0 评论 -
解决ios4下不支持position:fixed的问题
前言: 参考1 参考2 参考3自以为解决了所有IOS系统关于position:fixed的所有问题,看来还是没有,特在此补充!!!一、注意:不要在 fixed 元素中使用 input / textarea 元素。 在 android 手机下 fixed 表现要比 iOS 更好,软键盘弹出时,不会影响fixed元素定位;还是保留之前的态度,依然不推荐在 Android下使用 iS原创 2018-02-06 14:42:40 · 541 阅读 · 0 评论 -
手机网站表层div滑动,导致底层body滑动(touchmove的阻止)
案例描述body很长,可以滑动,body头部有一个模拟下拉的选择框。下拉选择有滚动轴,如下图。我给body一个overflow:hidden和高度是没有用的。手机网站上背景还是可以滑动,然后我给body一个touchmove的preventdefault()阻止事件,body滑动阻止了,PC上面是可以了,但是手机上面滑动div还是会导致底部body的滑动,我给div 一个阻止冒泡的事件stopPr原创 2017-09-12 10:14:43 · 2347 阅读 · 0 评论 -
移动端那些事儿(四)移动端开发注意事项
前言本文之所以叫手机网站注意问题二,是因为之前总结了手机网站常见问题,把其称为一。具体地址是:http://blog.csdn.net/qq_39198420/article/details/77848222 里面罗列了一下手机网站常见问题,本文再在其基础上,补充一些。一、h5网站input 设置为type=number的问题h5网页input 的type设置为number一般会产生三个问题原创 2017-09-07 10:24:34 · 749 阅读 · 0 评论 -
移动端那些事儿(三)移动端开发流行单位rem
前言rem单位在移动端前端开发很流行,关于css的单位,大家请看http://blog.csdn.net/qq_39198420/article/details/77847704rem的看法rem单位确实好处蛮多的,它是相对于根节点,让我们整个网站单位可以统一。还可以让我们的字体更好的自适应网站的大小。但是,你用过了就知道,它会出现一个问题:用Chrome浏览器打开你做的网站的时候,有时候会原创 2017-09-07 10:16:10 · 790 阅读 · 0 评论 -
js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结
js 判断安卓或者ios 之indexOf方式//判断访问终端var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return { trident: u.indexOf('Trident') > -1,原创 2017-09-07 09:56:41 · 1125 阅读 · 0 评论 -
iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案
[阅读原文](http://efe.baidu.com/blog/mobile-fixed-layout/) 移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。iOS下的 Fix转载 2017-08-24 14:35:12 · 1182 阅读 · 3 评论 -
手机/移动前端开发需要注意的20个要点
前言 移动前端开发正逐渐步入前端技术的主流,事实上跟在一般的pc上,并不需要你掌握额外的技术,然而你在pc web上那一套在多数情况下并不适用于手机web,你必须知道这其中的注意点。当然移动web给人的感觉是一个拼h5和css3的阵地,这里面有足够高大上的技术等着你去驾驭,在这方面,你可以欣喜地说:让ie见鬼去吧。 1、首先我们来看看webkit内核中的一些私有的meta标签原创 2017-09-14 14:22:31 · 373 阅读 · 0 评论 -
移动端那些事儿(二)jquery手势插件之jGestures
手机开发中,除了我们平时用的jquery基本事件之外,还有很多手势,今天介绍一款jquery手势插件jGestures,地址是:http://jgestures.codeplex.com/这个插件的强大之处在于它可以监听以下事件’pinch’(缩放手势), ‘rotate’(旋转手势), ‘swipe’(滑动手势), ‘tap’(轻触) 以及 ‘orientationchange’(改变设备方向)原创 2017-09-06 10:13:33 · 2234 阅读 · 0 评论 -
javascript——touch事件介绍与实例演示
前言 诸如智能手机和平板电脑一类的移动设备通常会有一(capacitive touch-sensitivescreen),以捕捉用户的手指所做的交互。随着移动网络的发展,其能够支持越来越复杂的应用,web开发者需要一种方法来处理这些事件。例如,几乎所有的快节奏游戏都需要玩家一次按下多个按钮,这种方式,在触摸屏情况下,意味着多点触摸。 Apple在iOS 2.0中引入了触摸事件API,An转载 2017-08-22 08:56:06 · 748 阅读 · 0 评论 -
移动端:active伪类无效的解决方法
:active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点<a href=”#”>这种情况,一般主流浏览器下也支持其他元素,如button等。在多按键的鼠标系统中,:active只适用于主按键,目前的大部分情况都是左键即主键。该伪类下定义的CSS样式只在按下鼠标按钮与释放鼠标按钮之间的短暂瞬间被触发显示。使用键盘的tab键也可以触发:active状态。说到:active转载 2017-08-22 08:27:32 · 914 阅读 · 0 评论 -
移动Web开发图片自适应两种常见情况解决方案
提出问题:手机端项目里图片想要全屏查看有个技术难点,就是图片居中问题。华为手机低版本andriod系统不支持使用负外边距或者-50%的写法,而且图片宽高如果超出手机屏幕尺寸,怎样把图片适当的缩小,再把图片居中显示?回答:如果想不用图片预览插件的话 ,可以使用如下的第二种js方法。本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案。开始吧在做配合手机客户端的We原创 2017-08-22 10:09:30 · 4120 阅读 · 0 评论 -
手机端页面在项目中遇到的一些问题及解决办法
1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题?首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案是:(1) 看是否能把body和html的height: 100%去除掉。(2) 在滚动的容器中增加:-webkit-overflow-scrolli...原创 2018-06-07 14:19:19 · 2271 阅读 · 0 评论