制作适应手机网页平板电脑（iPad)电脑网页的三种方法

Posted 2022-08-13 金蜘蛛网页设计器

这里所说的三种方法主要指同一个网页内容同时适合手机、电脑、平板电脑浏览的三种方法。

第一种方法：电脑网页绑定手机网页

分别制作适合手机浏览和电脑浏览的网页，然后在电脑网页中绑定手机浏览的网页。比如电脑网页名称为index.html，手机网页为index_m.html，域名为 www.168318.com，当电脑上访问http://www.168318.com /index.htm打开为电脑网页，在手机上访问同样的http://www.168318.com /index.htm地址，就会自动切换到http://www.168318.com /index_m.html。 ​​演示例子​​ ​​例子下载​​

电脑网页绑定手机网页方法：任意选择一个网页中的控件，多次按ESC，则会打开网页的属性，在属性列表中找到“对应的移动网页”，填入对应的手机网页名称。如下图：

第二种方法：同一网页套电脑网页模板和手机网页模板

先把手机和电脑网页共同的内容制作好（制作成一个网页），然后指定电脑浏览的父网页模板和移动手机网页浏览的父模板，生成网页时软件会分别生成手机网页和电脑网页。电脑网页自动绑定手机浏览的网页。形象的说法是：同一网页，电脑浏览时戴上电脑网页的模板作为外套，手机浏览时戴上的手机网页的模板作为外套。 ​​演示例子（https://wyeditor.com/example/%E5%90%8C%E4%B8%80%E7%BD%91%E9%A1%B5%E5%A5%97%E7%94%B5%E8%84%91%E7%BD%91%E9%A1%B5%E6%A8%A1%E6%9D%BF%E5%92%8C%E6%89%8B%E6%9C%BA%E7%BD%91%E9%A1%B5%E6%A8%A1%E6%9D%BF/）​​​ ​​例子下载（https://wyeditor.com/files/%E7%A7%BB%E5%8A%A8%E7%BD%91%E9%A1%B5%E4%B8%8E%E7%94%B5%E8%84%91%E7%BD%91%E9%A1%B5%E8%87%AA%E5%8A%A8%E5%88%87%E6%8D%A2.rar）​​

同一网页套电脑网页模板和手机网页模板方法：假如要制作的网页为 index.html(共同的内容都在上面)，电脑父模板为pc_mod.html，移动手机父模板为 mobile_mod.html。先打开index.html网页，任意选择一个网页中的控件，多次按ESC，则会打开网页的属性，在属性列表中找到“父网页模板路径_电脑”，填入“pc_mod.html”，再找到“父网页模板路径_移动”，填入“mobile_mod.html”。还可以通过“父网页模板高度_电脑”、“父网页模板高度_移动”分别设置这个网页的高度。index.html网页设置如下图：

pc_mod.htm的设置方法：要在该模板中插入一个“插入网页模板”控件，不用设置“模板路径”，即保持为空，把该模板属性“加载子模板”设置为“true”，“不加载自身”设置为“true”。表示把index.html的内容插入到这个模板中，“插入网页模板”控件放在哪个位置，就在哪个位置插入index.html的内容。

mobile_mod.html的设置方法：同pc_mod.htm的设置方法。设置好后如下：

这样设置好后，在模板index.hml生成网页时，会生成两个网页：一个是“index.html”（供电脑浏览）、一个是“index_m.html”（供移动手机浏览）。index.html自动绑定index_m.html。

第三种方法：设置各元素适应不同分辨率，手机、电脑、平板电脑等多设备混合浏览。

只制作一个网页，分别设置网页中元素适应不同分辨率浏览。​​本站首页（https://wyeditor.com/）​​​就是这种方式设计。 ​​本站源码下载​​

设置各元素适应不同分辨率方法：如下图，选中一个“文本框”控件，右边属性列表的属性“按显示设备设置位置、大小、字体大小”下面有“手机”、“平板电脑”、“超大屏设备”，再加上当前默认为电脑浏览共四种设置。这四种设置就是让各个控件在不同大小的浏览器能适应显示（在电脑浏览时可以手动改浏览大小就可以看到效果）。比如要使用“手机”这种设置，“启用”要先设置“true”。视实际情况设置该控件的宽度、高度、左边距，顶边距、字体大小，可以设置为一个固定数字，也可以用设置为百分数。如图中的“90%%”表示是正常网页下的顶边距的90%，如果设置的是“90%”就是父高度的90%。

总结

适应设备：第一种、第二方法只能制作适合电脑和非电脑（手机、平板）两种网页。第三种可以按不同分辨率（共四种设备）设置各个控件最佳显示。
难易度：第一种、第二种设计起来相对简单，适合两种设备显示的网页差异大。第三种相对设计起来比较难，适合各种设备显示差异不大的情况。