手机网页开发问题集锦
前言
接到一个小活，开发手机网页。对方给了一个psd设计图，让我做个手机网页，设计图很长，要求上拉动态加载。我想了想，本以为自己切个图处理一下就好，后来发现不行，许多问题。这里特地记录一下，有些还没解决，只是给了一下自己的想法。
转载请注明出处：//fed123.oss-ap-southeast-2.aliyuncs.com/2014/08/23/2014_web_question/
Doctype声明
有时可能您并没有注意，在编写html页面时候，有个关于 声明。HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 的用处。
不是 HTML 标签。它为[浏览器](https://www.a2doc.com)提供一项信息（声明），即 HTML 是用什么版本编写的。在HTML5中，简化了这一块，比html4简化了很多。不同格式的html声明如下：
HTML5：
HTML 4.01 Strict:
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。
XHTML 1.0 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。
详情可以参考： https://www.w3school.com.cn/tags/tag_doctype.asp
这里主要说一个问题：添加这个声明__以后，浏览器会自动给一些元素添加默认样式。比如table会默认添加如下样式：(浏览器会标识 user agent)
据说这个样式的优先级比较低，可以覆盖。但是我搞了半天也没弄好，原本整齐的页面变得一行一行的，中间有间隔。这个去掉__即可解决。
关于切图
拿到网页的psd设计图，最简便的方法就是切图了。photoshop会自动帮你切图，并生成html和图片切图文件夹。这里切图是需要一定的技巧的。首先，为了方便屏幕适配，方便排版，尽量采用横向切分。这样切出来的效果，就是每个tr就是整行，方便做width的适配，和纵向的分步加载。特别时候比较长的页面。
切分好图片之后，生成的html是采用table排版的。
这个table排版也是有讲究的，一般简单的横向切分，可以采用ps生成的，但是纵向切分的就不好控制了。所以建议采用横向切分，然后纵向自己做切分排版。否则整个页面的调试会是噩梦。采用的排版模式如下：
这样排版的好处是没有指定宽度的td可以自适应宽度。然后，如果是图片，要做到图片大小自适应，加上一句神奇的css代码即可：
加上这个，img会自动调整宽高，但是不会超过最大宽度。
图片展示插件
目前用的不错的幻灯片插件，个人感觉电脑网页用fancy box很不错，手机网页的用photo swipe，两者的使用方法基本相同。
具体使用方法，请参考官方示例。
手机端上下拉页面
在手机端对网页的操作比较灵活，用的最多的是下拉刷新，上拉加载，这样的动作。这里推荐一个插件iscroll，具体使用方法参考官方例子iScroll4 API。使用还是比较方便的，可以和jquery结合使用。
meta标签
首先编码用utf-8
然后设置视点viewpoint
viewport,
视图窗口，移动端特属的标签。一般使用下面这段代码即可：
上面的代码依次表示设置宽度为设备的宽度，默认不缩放，不允许用户缩放（即禁止缩放），在网页加载时隐藏地址栏与导航栏（ios7.1新增）。
注：target-densitydpi屏幕像素密度和缩放有关，你可以试试修改这个demo，用手机看下实际效果。我一般不设置这个属性。
apple-mobile-web-app-capable
是否启动webapp功能，会删除默认的苹果工具栏和菜单栏。
apple-mobile-web-app-status-bar-style
当启动webapp功能时，显示手机信号、时间、电池的顶部导航栏的颜色。默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。这个主要是根据实际的页面设计的主体色为搭配来进行设置。
注：如果对apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style不太理解，可查阅下面的参考资料第三篇文章，里面有截图说明。
telephone & email
忽略页面中的数字识别为电话号码
同样还有一个email识别
当然两者可以写在一起
其他meta
谢谢！
欢迎关注皓眸学问公众号（扫描左侧二维码），每天好文、新技术！任何学习疑问或者工作问题都可以给我留言、互动。T_T 皓眸大前端开发学习 T_T