中高职jQuery-Mobile的使用实训.docxVIP

项目十一：jQuery 项目十一：jQueryMobile的使用 jQuery jQueryMobile的使用 jQuery Mobile的使用实训 学习要点 页面的制作 jQuery Mobile简介 jQuery Mobile插件的使用 任务1：制作并测试第一个手机端页面 任务描述 本任务页面元素只有一个div和一个img标签，div中存放的是文字“第一个手机端页面”，img标签中存放的是一张宽120px，高150px的图片，本任务的目标就是要使得文字和图片在手机上能以合理的大小正常显示出来，最终运行效果如 图11- 2所示。 图11- 1错误的结果 图11- 2正确的结果 要点 ? 手机端页面适配方法 ? 手机端页面的测试方法 知识链接 1.基本术语 ? 设备像素(物理像素) 是指屏幕的实际物理像素点，比如华为Mate20手机屏幕是2244*1080的像素分辨率，代表它纵向有2244个物理像素点，横向有1080个物理像素点。 ? CSS像素（逻辑像素） CSS像素是Web编程中的概念，是抽象的，不是实际存在的，它是一个相对概念，它是独立于设备、用于逻辑上衡量像素的单位，所以又叫密度独立像素。比如，有CSS样式p{font-size:16px；}，这里的px就是CSS像素。 ? 屏幕尺寸 指屏幕的对角线长度，单位是英寸（inch），1英寸=2.54厘米。现在流行的屏幕尺寸有5.5、6.0和6.5等。 屏幕像素密度（pixels per inch－ppi） 指屏幕上每英寸可以显示的物理像素点的数量。比如 Mate20 的屏幕是 6.53 英寸(指的 是对角线的长度)，分辨率（物理像素）是2244*1080像素，那么它的ppi=22442+ ? 设备像素比（DPR） 指设备像素和CSS像素的比值，即：DPR=设备像素/CSS像素(水平或垂直方向上)。设备的DPR是固定的，一般的桌面显示器的DPR为1，主流手机的显示屏为2或3。比如， Mate20手机的屏幕宽度为360px（CSS像素），所以它的DPR=1080/360=3。 viewport（视口） viewport是指Web页面上用户的可见区域。viewport的大小是和设备相关的，在移动端， viewport的大小比PC端要小，一般无论手机还是平板，默认的viewport的宽度多数都是980px。 在Internet的早期，网页仅仅是在PC 端进行查看的，但是后来随着移动互联网的发展， 越来越多的Web访问是通过移动端进行的，但是因为PC 的viewport要比移动端大，所以为 了快速解决这个问题，移动端的浏览器默认只是把整个页面等比例缩小到移动端的viewport大小。这样做的后果就是，用户看到的是一个缩小版的整个页面，字体、图标和内容等等都非常小，想要查看都需要放大页面，放大之后又会出现横向滚动条，这对用户体验 来说是非常不好的。 为了解决移动端页面不匹配的问题，我们需要在网页头部添加一个meta标签： meta name=viewport content=width=device-width,initial-scale=1 这个声明是告诉浏览器将其页面内容缩放到恰好填满设备的宽度（即视口宽度为设备宽 度）。这样可以较好地解决网页在移动端显示过小的问题，viewport只对移动端浏览器有效， PC端浏览器会将其忽略。如果不想让用户进行缩放操作的话，还可以这样写： meta name=viewportcontent=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no 代码中的device-width是指这个设备最理想的viewport宽度。iPhone6之前的苹果手机 的device-width都是320px，iPhone6是375px，iPhone6+是414px，这里的px都是指CSS像素。安卓手机的device-width有320px、360px和384px等等，不同的设备的device-width是不一样的。 Web页面宽度的CSS像素值等于device-width时，对应到手机上就是占满全屏的宽度。因此，以上meta标签即可解决移动端屏幕适配问题，以后我们的移动端网页都要加上这一行。以下是一些相关属性的解释： ??initial-scale=1是指手机端页面初始化的时候缩放比例是1：1，也就是不缩放，这一句与width=device-width的作用相同，但为了解决各浏览器的兼容问题，一般width=device-width和initial-scale=1这两句都写上。 ? user-scalable=no是指禁止用户进行缩放（部分浏览器仍可缩放），yes表示允许缩放。