手机web遇到的问题及解决方法

梦里梦外; 2022-12-27 04:57 320阅读 0赞

首先，先说的是我每个项目都会用到的一个模板页，这个我遇到大大小小的坑之后定义好的一个html文件

1.  `<!DOCTYPE html>`
2.  `<html>`
3.  `<head>`
4.  `<meta charset="utf-8" />`
5.  ``
6.  `<meta name="viewport" content="width=device-width,inital-scale=1.0,minimum-scale=1.0,maximum-scake=1.0,user-scalable=no" />`
7.  ``
8.  `<meta name="apple-mobile-web-app-capable" content="yes" />`
9.  ``
10. `<meta name="apple-mobile-web-status-bar-style" content="block" />`
11. ``
12. `<meta name="fromat-detecition" content="telephone=no" />`
13. ``
14. `<link rel="stylesheet" type="text/css" href="css/base.css" />`
15. ``
16. `<link rel="stylesheet" type="text/css" href="css/content.css" />`
17. ``
18. `<link rel="stylesheet" type="text/css" href="css/main.css" />`
19. `<title></title>`
20. `<script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script>`
21. ``
22. `<script type="text/javascript" src="lib/base.js"></script>`
23. `</head>`
24. `<body>`
25. `</body>`
26. `</html>`

上面的meta可以帮我避免了好都问题

遇到的问题：

1.苹果手机上面，input控件会有默认的样式

解决

1.  `/*去掉苹果手机端web按钮默认样式，解决按钮默认圆角问题*/`
2.  `input[type="button"]{-webkit-appearance:none; /*去除input默认样式*//*border-radius: 0px;*/}`

2.在点击a标签的时候，安卓的手机会有蓝色底，苹果的机子会有灰色底

解决

1.  `/*屏蔽点击元素出现底色*/`
2.  `a`
3.  `{`
4.  `-webkit-tap-highlight-color:rgba(255,255,255,0);`
5.  `}`

3.禁止页面上的文字选中功能

解决

-webkit-user-select:none;

4.左图，右文字的结构实现

![Center][]

这种结构

（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还无法禁用手机横屏的情况下，如果你页面布局有问题的话，在横屏的时候会出现布局乱的情况

解决

在横屏的时候弹出个层把他改正

例如

1.  `/*@media screen and (orientation:landscape)`
2.  `{`
3.  `.orientation-phone`
4.  `{`
5.  `display: block;`
6.  `}`
7.  `}*/`
8.  `/*页面遮盖层*/`

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事件来模拟

1.  `$(element).bind('touchstart',function(e)`
2.  `{`
3.  `$(this).addClass('hover');`
4.  `})`
5.  `$(element).bind('touchend',function(e)`
6.  `{`
7.  `$(this).removeClass('hover');`
8.  `})`

这样是可以起到跟hover一样的效果，不过在UC 跟android的webview上面，在触发touchstart事件后移开目标元素，那么目标元素不会触发touchend，就导致了bug，解决方法是：

1.  `//加上一句`
2.  `$(element).bind('touchmove',function(e)`
3.  `{`
4.  `$(this).removeClass('hover');`
5.  `})`

2016-01-04

关于hover 失效，虽然说可以用touch时间来模仿，但是最快的方式应该是用 active。

[Center]: /images/20221120/aaf588ee01264186b9724d22dd57157a.png