请选择 进入手机版 | 继续访问电脑版
查看: 2867|回复: 7

PC转移动站点自适应怎么做

[复制链接]
发表于 2015-8-4 09:46:12 | 显示全部楼层 |阅读模式
没有独立的移动站,是不是只能用自适应来解决PC和移动的转换,但是自适应要怎么来做,需要在PC端做哪些操作
发表于 2015-8-4 09:51:12 | 显示全部楼层
自适应设计有其一般原则:在head添加以下代码并且使用<picture>元素处理自适应图片:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

自适应页面还应该在head中标识:
<meta name="applicable-device"content="pc,mobile">
表示页面同时适合在移动设备和PC上进行浏览。
回复 支持 反对

使用道具 举报

发表于 2015-8-4 10:07:51 | 显示全部楼层
除了Head區塊需加入下列語法外
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="applicable-device"content="pc,mobile">

具體實現上需要HTML5和CSS3來搭配
常見的問題是圖片沒有跟著自適化,過大的圖片影響手機用戶體驗

如果是用Wordpress架站,可用插件來解決上述問題 (圖片分出不同尺寸,依客戶螢幕大小選配適當的檔案)
若非Wordpress架站,則需要自行寫出相同Javascript來作
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-8-4 11:08:50 | 显示全部楼层
以上两位的回答确实有用,不过按三楼的意思老网站是不是不合适这么做了,因为图片什么的大小可能是固定的
回复 支持 反对

使用道具 举报

发表于 2015-8-4 11:10:03 | 显示全部楼层
建新站点吧
回复 支持 反对

使用道具 举报

发表于 2015-8-4 11:21:28 | 显示全部楼层
本帖最后由 kondoyui 于 2015-8-4 11:22 编辑
形丨意灬天丶地 发表于 2015-8-4 11:08
以上两位的回答确实有用,不过按三楼的意思老网站是不是不合适这么做了,因为图片什么的大小可能是固定的 ...

花時間製作縮小版的圖片即可....
自適化的JS源碼網路上應有現成的

不過長期作法還是主題改版,改用HTML5和CSS3

回复 支持 反对

使用道具 举报

发表于 2015-8-4 11:30:36 | 显示全部楼层
kondoyui 发表于 2015-8-4 11:21
花時間製作縮小版的圖片即可....
自適化的JS源碼網路上應有現成的

台湾人民?

点评

也有可能是香港的。  详情 回复 发表于 2015-8-4 20:57
回复 支持 反对

使用道具 举报

发表于 2015-8-4 20:57:44 | 显示全部楼层
休斯_卡特 发表于 2015-8-4 11:30
台湾人民?

也有可能是香港的。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|Archiver|Baidu Inc.

GMT+8, 2020-9-30 15:01 , Processed in 0.231354 second(s), 17 queries .

Powered by Discuz! X3.2

© 2001-2011 Comsenz Inc.

返回顶部