前端代码规范:网站移动适配代码规范

ECMSPLUS | 2021-11-03 |

摘要:举例:
首页: https://www.ecmsplus.com/
PC地址:https://www.ecmsplus.com/
移动地址:https://mip.ecmsplus.com/一、跳转适配+代码适配PC页面规范<!‐‐TDK标签 所有页面必须有...

举例:OqlECMSPLUS
首页: https://www.ecmsplus.com/OqlECMSPLUS
PC地址:https://www.ecmsplus.com/OqlECMSPLUS
移动地址:https://mip.ecmsplus.com/

一、跳转适配+代码适配

PC页面规范

<!‐‐TDK标签 所有页面必须有‐‐>OqlECMSPLUS
<title>网站名称‐赢造自由的网上贸易</title>OqlECMSPLUS
<meta name="keywords" content="网站名称" />OqlECMSPLUS
<meta name="description" content="网站名称(www.ecmsplus.com)倡导自由的网上贸易,为全球220个国家和地区的商人提供在线贸易服务。融供应商机、求购信息、企业目录于一体,正在成为全球商人销售产品、开展网上贸易及网络推广的首选电子商务网站" />OqlECMSPLUS
<!‐‐页面申明 表示该页面规范统一性内容网址‐‐>OqlECMSPLUS
<link rel="canonical" href="https://www.ecmsplus.com/">OqlECMSPLUS
<!‐‐页面申明 表示该页面为PC页面‐‐>OqlECMSPLUS
<meta name="applicable‐device" content="pc">OqlECMSPLUS
<!‐‐自适配标签 浏览器小于640px自动转向到适配网址‐‐>OqlECMSPLUS
<link rel="alternate" media="only screen and (max‐width: 640px)" href="h ttps://mip.ecmsplus.com/">OqlECMSPLUS
<!‐‐自适配标签 该网页对应的其他移动版本的网址‐‐>OqlECMSPLUS
<meta name="mobile‐agent" content="format=wml;url=https://mip.ecmsplus.com/"OqlECMSPLUS
<meta name="mobile‐agent" content="format=xhtml;url=https://mip.ecmsplus.com/" />OqlECMSPLUS
<meta name="mobile‐agent" content="format=html5;url=https://mip.ecmsplus.com/" />

移动页面规范

OqlECMSPLUS
<!‐‐TDK标签 所有页面必须有‐‐>OqlECMSPLUS
<title>网站名称‐赢造自由的网上贸易</title>OqlECMSPLUS
<meta name="keywords" content="网站名称" />OqlECMSPLUS
<meta name="description" content="网站名称(www.ecmsplus.com)倡导自由的网上贸易,为全球220个国家和地区的商人提供在线贸易服务。融供应商机、求购信息、企业目录于一体,正在成为全球商人销售产品、开展网上贸易及网络推广的首选电子商务网站" />OqlECMSPLUS
<!‐‐页面申明 表示该页面为移动页面‐‐>OqlECMSPLUS
<meta name="applicable‐device" content="mobile">OqlECMSPLUS
<!‐‐页面申明 表示该页面规范统一性内容网址 有PC内容对应的指向PC内容网址,没有的指向移动页面网址‐‐>OqlECMSPLUS
<link rel="canonical" href="https://www.ecmsplus.com/">OqlECMSPLUS
 

二、自适应

自适应页面规范

OqlECMSPLUS
<!‐‐TDK标签 所有页面必须有‐‐>OqlECMSPLUS
<title>网站名称‐赢造自由的网上贸易</title>OqlECMSPLUS
<meta name="keywords" content="网站名称" />OqlECMSPLUS
<meta name="description" content="网站名称(www.ecmsplus.com)倡导自由的网上贸易,为全球220个国家和地区的商人提供在线贸易服务。融供应商机、求购信息、企业目录于一体,正在成为全球商人销售产品、开展网上贸易及网络推广的首选电子商务网站" />OqlECMSPLUS
<!‐‐页面申明 表示该页面为移动、PC自适应页面‐‐>OqlECMSPLUS
<meta name="applicable‐device" content="mobile,pc">OqlECMSPLUS
<!‐‐页面申明 表示该页面规范统一性内容网址 有PC内容对应的指向PC内容网址,没有的指向移动页面网址‐‐>OqlECMSPLUS
<link rel="canonical" href="https://www.ecmsplus.com/">OqlECMSPLUS
 

如下示例代码:

<!--PC页面规范-->
<title>{$meta_title}</title>
<meta name="keywords" content="{$meta_keywords}" />
<meta name="description" content="{$meta_description}" />
<!--页面申明 表示该页面规范统一性内容网址-->
<link rel="canonical" href="{SITE_URL}">
<!--页面申明 表示该页面为PC页面-->
<meta name="applicable‐device" content="pc">
<!--自适配标签 浏览器小于640px自动转向到适配网址‐-->
<link rel="alternate" media="only screen and (max‐width: 640px)" href="{SITE_MURL}">

<title>{$title}_{$cat.name}_{SITE_NAME}</title>
<meta name="keywords" content="{$meta_keywords}" />
<meta name="description" content="{$meta_description}" />
<!--页面申明 表示该页面为移动页面-->
<meta name="applicable-device" content="mobile">

免责/版权声明:

1、所有来源标注为 ECMSPLUS/ecmsplus.com的内容版权均为本站所有,若您需要引用、转载,只需要注明来源及原文链接即可,如涉及大面积转载,请来信告知,获取授权。

2、本站所提供的文章资讯、软件资源、素材源码等内容均为作者提供、网友推荐、互联网整理而来(部分报媒/平媒内容转载自网络合作媒体),仅供学习参考,如有侵犯您的版权,请联系我们,本站将在三个工作日内改正。

3、若您的网站或机构从本站获取的一切资源进行商业使用,除来源为本站的资料需与本站协商外,其他资源请自行联系版权所有人。

4、 ECMSPLUS/ecmsplus.com不保证资源的准确性、安全性和完整性,请您在阅读、下载及使用过程中自行确认,本站亦不承担上述资源对您或您的网站造成的任何形式的损失或伤害

5、未经 ECMSPLUS/ecmsplus.com允许,不得盗链、盗用本站资源;不得复制或仿造本网站,不得在非 ECMSPLUS/ecmsplus.com所属的服务器上建立镜像, ECMSPLUS/ecmsplus.com对其自行开发的或和他人共同开发的所有内容、技术手段和服务拥有全部知识产权,任何人不得侵害或破坏,也不得擅自使用。

6、互联网的本质是自由与分享,我们真诚的希望,每一份有价值的正能量能够在互联网中自由传播,能够为每一个网站提供动力。

标签:
精品源码
  • 二维码种子溯源系统,一物一码防伪验证查询(单用户版) 支持定制开发

    惊爆价¥1500.00

    立即购买
    二维码种子溯源系统,一物一码防伪验证查询(单用户版) 支持定制开发
  • 帝国cms7.5精仿企业信息综合门户《莞商网》(原创)

    惊爆价¥1500.00

    立即购买
    帝国cms7.5精仿企业信息综合门户《莞商网》(原创)
  • 厂房网,厂房出租,厂房出售,仓库出租,园区招商商铺厂房网整站源码

    惊爆价¥1999.00

    立即购买
    厂房网,厂房出租,厂房出售,仓库出租,园区招商商铺厂房网整站源码
看点推荐
精选文章

站长交流群

互联网站长技术交流群
共同学习,共同进步,共同成长!

QQ交流群

推荐文章

EmpireCMS(帝国CMS) 最新版(v7.5)已知漏洞汇总

帝国第三方登陆:微信内部登陆+扫码登陆2.0安装说明与使用方法

帝国cms百度Webupload批量上传组件,支持前台投稿

帝国cms通过用灵动标签的SQL语句查询来调用栏目导航

帝国cms图片集字段morepic分割,自定义图片集显示

帝国cms 技巧整理笔记,持续更新中

帝国cms 技巧整理笔记:常用变量,COOKIE获取和系统模板

最新文章

热门标签

关注我们

微信扫一扫,关注更多精彩

  • 公众号
    全面掌握源码一手资讯

  • 服务号
    精彩活动,推送提醒

垂询热线:18680688182

商务合作:0769-8700 9090
文章投稿: