手机web遇到的问题及解决方法
2015-01-23 16:31
162 查看
首先,先说的是我每个项目都会用到的一个模板页,这个我遇到大大小小的坑之后定义好的一个html文件
上面的meta可以帮我避免了好都问题
遇到的问题:
1.苹果手机上面,input控件会有默认的样式
解决
解决
解决
这种结构
(1).第一次做的时候,左右两块都是用百分百,这样在不同的屏幕因为右边字体的原因会有布局混乱的情况,然后就用媒体查询写多了两个样式文件,不过还有一个就是在平板上面,同样的百分百,左边的图片太大,导致右边的文字之间的间距要很大才可以对齐,效果很不好
(2).第二次做的时候,就想到了一个方法,利用float脱离文档流的特性,给图片设置一个maxwidth,然在device-width*图片百分百=maxwidth时,将文字所在的div的float设置为none;且设置margin-left为图片的宽度+之间的间距。
(3).第三次做的时候,因为看了其他的一些轻APP在横屏的时候,图片大小依然一致,所以把图片宽度定死,给个max-width和min-width,用弹性布局 flex-box,这回就很简单的高度这个布局问题
5.在微信,UC打开页面会有缓存问题,导致有时候改动的小效果看不到
解决
这里试过用cache来不让其缓存,不过用完之后反而令他们不加载文件(至今还没成功使用过cache),最后在加载发送请求的时候文件后面添加多个随机数,这样才解决测试是缓存问题
6.在做手机页面的时候,很多时候会用到z-index这个属性,如果用到这个属性的时候再对对应元素设置的话,会比较容易乱。
解决
我设置了 top0{z-index:9999};
top1{z-index:8888};
top2{z-index:7777};
top3{z-index:6666};
top4{z-index:5555};
这样,在每个页面中,对应得贴上上面样式就行了。
7.还有就是多列布局column,弹性布局flex-box
在不知道这两种布局的时候,以下布局对来来说是比较麻烦的,特别是三列的,并且中间那个还有左右边框,定义百分百的时候比较麻烦。
在知道多列布局column,弹性布局flex-box后 上面的问题很好解决,但是要记得column的子元素要给高度,不然有可能会布局混乱
还有个问题就是设置column-count为3的时候,在7个子元素的时候会是这样的
竖着排列,不符合正常的一个阅读习惯,最后还是改成了float来布局
8.em跟rem的区别
em是相对于父层
rem是相对于根元素
所以说,如果html{font-size:62.5%};的时候,
如果是在parent元素设置1.5em,child设置1.0em就等同于html的1.5em了
在parent元素设置1.5em的情况下,child用rem作为font-size的单位的话,那么就要设置1.5rem才等同上面的效果
9.backgrond-size,这个属性很好用
用法有 a.百分百 b.直接给宽高 c.cover d.contain四种用法,按需要选择使用
10.在iphone中,在手机改为横屏模式的时候,字体会默认变大
解决
/*禁止IOS横屏的时候字体变大*/
-webkit-text-size-adjust: none;
11.在用到<div><img src="" /></div>这个结构的时候,就是用块级元素包住img的时候,会出现div高度大于img的情况,就是有点高度不知道怎么来的
解决
img{display:block;};
12.在用到media的时候,如果在<meta>有设置width=device-widht的话,media中在设置max-width min-width,这里不能用max-device-width 跟 min-device-height,不然会没效果
13.目前手机web还无法禁用手机横屏的情况下,如果你页面布局有问题的话,在横屏的时候会出现布局乱的情况
解决
在横屏的时候弹出个层把他改正
例如
14.在弹出整屏div的时候,如果页面整体大于一屏幕,这时候还会出现页面可以滚动的情况
页面旁边是出现滚动条的,而且是可以拖动的
解决
在body设置高度100%,且overflow-hidden;在弹出消失的时候才去掉overflow-hidden;
15.在做一个手机web项目的时候,要先总结下页面所以的字体大小,然后定义好几种常用font-size,防止后期混乱
16.在看设计稿的时候,要注意比例的缩放,因为UI做的时候用的尺寸是用640*1136(至少我这边是这样),然后再做手机web的时候,我们再mate那里content设置width=device-width,所以要根据实际的页面效果来定义页面常用的font-size大小以及其他。不能按UI给出的字体大小来设置font-size。
17.在class反面,少用继承,多用组合,这样可以加快开发效率,可以自己定义一个底层样式base.css(常用样式且所以项目都可以共用)
18.可能做手机web的都去学校手机web开发框架,例如我就是学了jquery mobile,这个框架很强大,但是不的不说,就是在UI样式方面比较麻烦,要不断的去覆盖样式,如果你的web是UI是有自己特色的话,这个时候用jquery mobile就比较费时间(至少我是这样)。所以说在开发的时候,觉得哪个方法快就用哪个,不要为了用框架而且用框架。
2015-03-05
19.苹果系统在滚动长页面的时候总是滚动得很不利索,回弹效果。解决:-webkit-overflow-scrolling:touch;
20.在苹果手机上,明明已经对页面内容元素设置-webkit-user-select:none了,还是可以通过点击空白处选择。解决:html,body也同时设置-webkit-user-select::none。
21.给元素加边框,防止边框溢出。解决:-webkit-box-sizing:border-box;
22.
单行溢出
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
多行溢出
display:-webkit-box;
-webkit-line-clamp:2 //2代表行数
-webkit-box-orient:vertical;
text-overflow:ellipsis;
overflow:hidden;
2015-03-20
23.在手机web是没有hover的,那么如果想要hover的效果就只能用通过touch事件来模拟
这样是可以起到跟hover一样的效果,不过在UC 跟android的webview上面,在触发touchstart事件后移开目标元素,那么目标元素不会触发touchend,就导致了bug,解决方法是:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- 宽度设置为设备实际宽度,初始化倍数为1,最小倍数为1,最大倍数为1,用户缩放为否 --> <meta name="viewport" content="width=device-width,inital-scale=1.0,minimum-scale=1.0,maximum-scake=1.0,user-scalable=no" /> <!-- 删除默认的苹果工具栏和菜单栏 --> <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 苹果手机顶部为黑色 --> <meta name="apple-mobile-web-status-bar-style" content="block" /> <!-- 屏蔽浏览器自动识别数字为电话号码 --> <meta name="fromat-detecition" content="telephone=no" /> <!-- base.css是所有项目都会用到的底层样式 --> <link rel="stylesheet" type="text/css" href="css/base.css" /> <!-- content.css是每个项目所有页面都会用到的公共样式 --> <link rel="stylesheet" type="text/css" href="css/content.css" /> <!-- main.css为每个页面或是模块用到的一个样式文件--> <link rel="stylesheet" type="text/css" href="css/main.css" /> <title></title> <script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script> <!-- base.js为所有项目都会用到的js文件 --> <script type="text/javascript" src="lib/base.js"></script> </head> <body> </body> </html>
上面的meta可以帮我避免了好都问题
遇到的问题:
1.苹果手机上面,input控件会有默认的样式
解决
/*去掉苹果手机端web按钮默认样式,解决按钮默认圆角问题*/ input[type="button"]{-webkit-appearance:none; /*去除input默认样式*//*border-radius: 0px;*/}2.在点击a标签的时候,安卓的手机会有蓝色底,苹果的机子会有灰色底
解决
/*屏蔽点击元素出现底色*/ a { -webkit-tap-highlight-color:rgba(255,255,255,0); }3.禁止页面上的文字选中功能
解决
-webkit-user-select:none;4.左图,右文字的结构实现
这种结构
(1).第一次做的时候,左右两块都是用百分百,这样在不同的屏幕因为右边字体的原因会有布局混乱的情况,然后就用媒体查询写多了两个样式文件,不过还有一个就是在平板上面,同样的百分百,左边的图片太大,导致右边的文字之间的间距要很大才可以对齐,效果很不好
(2).第二次做的时候,就想到了一个方法,利用float脱离文档流的特性,给图片设置一个maxwidth,然在device-width*图片百分百=maxwidth时,将文字所在的div的float设置为none;且设置margin-left为图片的宽度+之间的间距。
(3).第三次做的时候,因为看了其他的一些轻APP在横屏的时候,图片大小依然一致,所以把图片宽度定死,给个max-width和min-width,用弹性布局 flex-box,这回就很简单的高度这个布局问题
5.在微信,UC打开页面会有缓存问题,导致有时候改动的小效果看不到
解决
这里试过用cache来不让其缓存,不过用完之后反而令他们不加载文件(至今还没成功使用过cache),最后在加载发送请求的时候文件后面添加多个随机数,这样才解决测试是缓存问题
6.在做手机页面的时候,很多时候会用到z-index这个属性,如果用到这个属性的时候再对对应元素设置的话,会比较容易乱。
解决
我设置了 top0{z-index:9999};
top1{z-index:8888};
top2{z-index:7777};
top3{z-index:6666};
top4{z-index:5555};
这样,在每个页面中,对应得贴上上面样式就行了。
7.还有就是多列布局column,弹性布局flex-box
在不知道这两种布局的时候,以下布局对来来说是比较麻烦的,特别是三列的,并且中间那个还有左右边框,定义百分百的时候比较麻烦。
在知道多列布局column,弹性布局flex-box后 上面的问题很好解决,但是要记得column的子元素要给高度,不然有可能会布局混乱
还有个问题就是设置column-count为3的时候,在7个子元素的时候会是这样的
竖着排列,不符合正常的一个阅读习惯,最后还是改成了float来布局
8.em跟rem的区别
em是相对于父层
rem是相对于根元素
所以说,如果html{font-size:62.5%};的时候,
如果是在parent元素设置1.5em,child设置1.0em就等同于html的1.5em了
在parent元素设置1.5em的情况下,child用rem作为font-size的单位的话,那么就要设置1.5rem才等同上面的效果
9.backgrond-size,这个属性很好用
用法有 a.百分百 b.直接给宽高 c.cover d.contain四种用法,按需要选择使用
10.在iphone中,在手机改为横屏模式的时候,字体会默认变大
解决
/*禁止IOS横屏的时候字体变大*/
-webkit-text-size-adjust: none;
11.在用到<div><img src="" /></div>这个结构的时候,就是用块级元素包住img的时候,会出现div高度大于img的情况,就是有点高度不知道怎么来的
解决
img{display:block;};
12.在用到media的时候,如果在<meta>有设置width=device-widht的话,media中在设置max-width min-width,这里不能用max-device-width 跟 min-device-height,不然会没效果
13.目前手机web还无法禁用手机横屏的情况下,如果你页面布局有问题的话,在横屏的时候会出现布局乱的情况
解决
在横屏的时候弹出个层把他改正
例如
/*@media screen and (orientation:landscape) { .orientation-phone { display: block; } }*/ /*页面遮盖层*/
14.在弹出整屏div的时候,如果页面整体大于一屏幕,这时候还会出现页面可以滚动的情况
页面旁边是出现滚动条的,而且是可以拖动的
解决
在body设置高度100%,且overflow-hidden;在弹出消失的时候才去掉overflow-hidden;
15.在做一个手机web项目的时候,要先总结下页面所以的字体大小,然后定义好几种常用font-size,防止后期混乱
16.在看设计稿的时候,要注意比例的缩放,因为UI做的时候用的尺寸是用640*1136(至少我这边是这样),然后再做手机web的时候,我们再mate那里content设置width=device-width,所以要根据实际的页面效果来定义页面常用的font-size大小以及其他。不能按UI给出的字体大小来设置font-size。
17.在class反面,少用继承,多用组合,这样可以加快开发效率,可以自己定义一个底层样式base.css(常用样式且所以项目都可以共用)
18.可能做手机web的都去学校手机web开发框架,例如我就是学了jquery mobile,这个框架很强大,但是不的不说,就是在UI样式方面比较麻烦,要不断的去覆盖样式,如果你的web是UI是有自己特色的话,这个时候用jquery mobile就比较费时间(至少我是这样)。所以说在开发的时候,觉得哪个方法快就用哪个,不要为了用框架而且用框架。
2015-03-05
19.苹果系统在滚动长页面的时候总是滚动得很不利索,回弹效果。解决:-webkit-overflow-scrolling:touch;
20.在苹果手机上,明明已经对页面内容元素设置-webkit-user-select:none了,还是可以通过点击空白处选择。解决:html,body也同时设置-webkit-user-select::none。
21.给元素加边框,防止边框溢出。解决:-webkit-box-sizing:border-box;
22.
单行溢出
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
多行溢出
display:-webkit-box;
-webkit-line-clamp:2 //2代表行数
-webkit-box-orient:vertical;
text-overflow:ellipsis;
overflow:hidden;
2015-03-20
23.在手机web是没有hover的,那么如果想要hover的效果就只能用通过touch事件来模拟
$(element).bind('touchstart',function(e) { $(this).addClass('hover'); }) $(element).bind('touchend',function(e) { $(this).removeClass('hover'); })
这样是可以起到跟hover一样的效果,不过在UC 跟android的webview上面,在触发touchstart事件后移开目标元素,那么目标元素不会触发touchend,就导致了bug,解决方法是:
//加上一句 $(element).bind('touchmove',function(e) { $(this).removeClass('hover'); })
相关文章推荐
- 做手机web半年遇到的问题及解决方法
- 学习Java Web开发中遇到的问题,及其解决方法
- rhel6.4 简单创建自己的http web 界面服务遇到的问题和解决方法
- web项目中路径的获取和遇到问题的解决方法
- 从零开始写javaweb框架(第一章)—— 所遇到的问题 与 解决方法
- Eclipse中进行web project开发时遇到httperror 500 错误 jsp support not configured 问题的解决方法
- maven 遇到failOnMissingWebXml有关问题解决方法:web.xml is missing and <failOnMissingWebXml> is set to true
- Xfire集成到web 项目中遇到的问题 及解决方法
- webpack和webpack-dev-server安装配置(遇到各种问题的解决方法)
- Xfire集成到web 项目中遇到的问题 及解决方法
- PHP5 在调用 JAVA WebService 时遇到的各种问题及解决方法(一)
- PHP5 在调用 JAVA WebService 时遇到的各种问题及解决方法(一)
- JAVAWeb、 Easyui、Ibatis、Oracle项目遇到问题及解决方法
- maven 遇到failOnMissingWebXml有关问题解决方法
- Web开发敏捷之道-应用Rails进行敏捷Web开发-第三版 在用rails3.2学习过程中遇到的问题及解决方法
- WEB开发过程中遇到的各种问题及解决方法总结
- PHP5 在调用 JAVA WebService 时遇到的各种问题及解决方法(二)
- 前端webview开发中遇到的一些问题及其解决方法
- Eclipse中进行web project开发时遇到httperror 500 错误 jsp support not configured 问题的解决方法
- PHP5 在调用 JAVA WebService 时遇到的各种问题及解决方法(二)