京东网站设计代码,济南 网站推广,网站集约化建设纪要,线上推广计划1. 移动端头部标签 head meta !DOCTYPE html !-- 使用 HTML5 doctype#xff0c;不区分大小写 --
html langzh-cmn-Hans !-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --
head!-- 声明文档使用的字符编码 --!DOCTYPE html !-- 使用 HTML5 doctype不区分大小写 --
html langzh-cmn-Hans !-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --
head!-- 声明文档使用的字符编码 --meta charsetutf-8!-- 优先使用 IE 最新版本和 Chrome --meta http-equivX-UA-Compatible contentIEedge,chrome1/!-- 页面描述 --meta namedescription content不超过150个字符/!-- 页面关键词 --meta namekeywords content/!-- 网页作者 --meta nameauthor contentname, emailgmail.com/!-- 搜索引擎抓取 --meta namerobots contentindex,follow/!-- 为移动设备添加 viewport --meta nameviewport contentinitial-scale1, maximum-scale3, minimum-scale1, user-scalableno!-- widthdevice-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz --!-- iOS 设备 begin --meta nameapple-mobile-web-app-title content标题!-- 添加到主屏后的标题iOS 6 新增 --meta nameapple-mobile-web-app-capable contentyes/!-- 是否启用 WebApp 全屏模式删除苹果默认的工具栏和菜单栏 --meta nameapple-itunes-app contentapp-idmyAppStoreID, affiliate-datamyAffiliateData, app-argumentmyURL!-- 添加智能 App 广告条 Smart App BanneriOS 6 Safari --meta nameapple-mobile-web-app-status-bar-style contentblack/!-- 设置苹果工具栏颜色 --meta nameformat-detection contenttelphoneno, emailno/!-- 忽略页面中的数字识别为电话忽略email识别 --!-- 启用360浏览器的极速模式(webkit) --meta namerenderer contentwebkit!-- 避免IE使用兼容模式 --meta http-equivX-UA-Compatible contentIEedge!-- 不让百度转码 --meta http-equivCache-Control contentno-siteapp /!-- 针对手持设备优化主要是针对一些老的不识别viewport的浏览器比如黑莓 --meta nameHandheldFriendly contenttrue!-- 微软的老式浏览器 --meta nameMobileOptimized content320!-- uc强制竖屏 --meta namescreen-orientation contentportrait!-- QQ强制竖屏 --meta namex5-orientation contentportrait!-- UC强制全屏 --meta namefull-screen contentyes!-- QQ强制全屏 --meta namex5-fullscreen contenttrue!-- UC应用模式 --meta namebrowsermode contentapplication!-- QQ应用模式 --meta namex5-page-mode contentapp!-- windows phone 点击无高光 --meta namemsapplication-tap-highlight contentno!-- iOS 图标 begin --link relapple-touch-icon-precomposed href/apple-touch-icon-57x57-precomposed.png/!-- iPhone 和 iTouch默认 57x57 像素必须有 --link relapple-touch-icon-precomposed sizes114x114 href/apple-touch-icon-114x114-precomposed.png/!-- Retina iPhone 和 Retina iTouch114x114 像素可以没有但推荐有 --link relapple-touch-icon-precomposed sizes144x144 href/apple-touch-icon-144x144-precomposed.png/!-- Retina iPad144x144 像素可以没有但推荐有 --!-- iOS 图标 end --!-- iOS 启动画面 begin --link relapple-touch-startup-image sizes768x1004 href/splash-screen-768x1004.png/!-- iPad 竖屏 768 x 1004标准分辨率 --link relapple-touch-startup-image sizes1536x2008 href/splash-screen-1536x2008.png/!-- iPad 竖屏 1536x2008Retina --link relapple-touch-startup-image sizes1024x748 href/Default-Portrait-1024x748.png/!-- iPad 横屏 1024x748标准分辨率 --link relapple-touch-startup-image sizes2048x1496 href/splash-screen-2048x1496.png/!-- iPad 横屏 2048x1496Retina --link relapple-touch-startup-image href/splash-screen-320x480.png/!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) --link relapple-touch-startup-image sizes640x960 href/splash-screen-640x960.png/!-- iPhone/iPod Touch 竖屏 640x960 (Retina) --link relapple-touch-startup-image sizes640x1136 href/splash-screen-640x1136.png/!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) --!-- iOS 启动画面 end --!-- iOS 设备 end -- meta namemsapplication-TileColor content#000/!-- Windows 8 磁贴颜色 --meta namemsapplication-TileImage contenticon.png/!-- Windows 8 磁贴图标 --link relalternate typeapplication/rssxml titleRSS href/rss.xml/!-- 添加 RSS 订阅 --link relshortcut icon typeimage/ico href/favicon.ico/!-- 添加 favicon icon --!-- sns 社交标签 begin --!-- 参考微博API --meta propertyog:type content类型 /meta propertyog:url contentURL地址 /meta propertyog:title content标题 /meta propertyog:image content图片 /meta propertyog:description content描述 /!-- sns 社交标签 end -- !-- Android设备--meta contentemailno nameformat-detection / 去除安卓设备对邮箱的自动识别 name属性详解:主要用于描述网页对应于content网页内容以便于搜索引擎机器人查找、分类。这其中description站点在搜索引擎上的描述和keywords分类关键词是最重要的所以应该: 一、给每页加一个meta值。 参数Keywords (关键字) 说明为搜索引擎提供的关键字列表 举例meta nameKeywords Content苏州SEO,网站优化网站推广,苏州网络营销,…… 提示各关键词间用英文逗号“,隔开。如果你使用的是中文的标点符号关键词将不起作用。meta的通常用处是指定搜索引擎用来提高搜索质量的关键词。当数个meta元素提供文档语言从属信息时搜索引擎会使用lang特性来过滤并通过用户的语言优先。 二、参照来显示搜索结果。 例如META NAMEKeywords CONTENTSEO,网站优化,搜索引擎优化… 参数Description (简介) 说明Description用来告诉搜索引擎你的网站主要内容。 举例meta nameDescription Content你网页的简述 提示无 例如META NAMEDescription CONTENT苏州SEO_Winter为您提供专业的苏州网站优化、搜索引擎优化服务通过对客户网站优化使客户网站排名达到搜索引擎首页 三、参数Robots (机器人向导) 说明Robots用来告诉搜索机器人哪些页面需要索引哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。 举例meta nameRobots ContentAll|None|Index|Noindex|Follow|Nofollow 提示许多搜索引擎都通过放出robot/spider搜索来登录网站这些robot/spider就要用到meta元素的一些特性来决定怎样登录。 all文件将被检索且页面上的链接可以被查询 none文件将不被检索且页面上的链接不可以被查询(和 “noindex, no follow 起相同作用) index文件将被检索让robot/spider登录 follow页面上的链接可以被查询 noindex文件将不被检索但页面上的链接可以被查询(不让robot/spider登录) nofollow文件将不被检索页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找) 例如META NAMERobots CONTENTAll四、参数Author (作者) 说明标注网页的作者或制作组 举例meta nameAuthor Content张三www.uedcss.com“ 提示Content可以是你或你的制作组的名字,或Email 例如meta nameAuthor Contentnameyehonuedcss.com“ 五、参数Copyright (版权) 说明标注版权 举例meta nameCopyright Content本页版权归yehon所有。All Rights Reserved 提示无 例如META NAMECopyright CONTENT本站版权归yehon版权所有。All Rights Reserved 六、参数Generator (编辑器) 说明编辑器的说明 举例meta nameGenerator ContentPCDATA|FrontPage| 提示Content你所用编辑器 例如meta nameGenerator ContentPCDATA|FrontPage| 七、参数Language (语言) 说明网页语言的说明 举例META NAMELanguage CONTENTzh-CN 提示无 例如META NAMELanguage CONTENTzh-CN 八、参数Designer(设计者) 说明网页设计者的说明 举例META NAMEDesigner CONTENTyour name 提示一般而言发布者为个人信息 例如META NAMEDesigner CONTENTname 九、参数Publisher(发布者) 说明网站发布者的说明 举例META NAMEPublisher CONTENTyour name 提示一般而言发布者为发布公司信息 例如META NAMEPublisher CONTENTweb前端寒风 十、参数Title(主题) 说明网站主题说明 举例META NAMETitle CONTENTyour title 提示通常这里的值是网页的内容标题 例如META NAMETitle CONTENT银行卡快速导航 十一、参数Subject(内容的主题) 说明主要是指这篇文章的主题是什么核心内容是什么。 举例META NAMESubject CONTENTyour Subject 提示无 例如META NAMESubject CONTENT网站前端_web前端寒风|优设前端 十二、参数Abstract(摘要) 说明网页页面说明 举例META NAMEAbstract CONTENT本网站为学习点滴记录网站 提示对页面内容进行简短的描述常见于内容页面中可以加强搜索引擎对页面内容的保存便于用户搜索。 例如META NAMEAbstract CONTENT本网站为学习点滴记录网站 十三、参数Expires(期限) 说明网页页面期限 举例META NAMEExpires CONTENTtime 提示必须是GMT标准时间定义过期时间超过时间后即不能从cache中掉出。 例如META NAMEExpires CONTENTWed, 11 Feb 2010 00:51:09 EST 十四、参数Distribution(分配目标) 说明META NAME在那些页面有效 举例META NAMEDistribution CONTENTGlobal 提示是指网站都在哪些地区范围出现一般设置为Global即为全球范围。 例如META NAMEDistribution CONTENTGlobal 十五、参数Revisit-After(重访时间) 说明一般大型网站蜘蛛爬行频率相当频繁导致服务器重压。因此做这样的限制是让蜘蛛在限定日期内重访例如7 days就是七天访问一次 举例META NAMERevisit-After CONTENTN Days 提示是指网站都在哪些地区范围出现一般设置为Global即为全球范围。 例如META NAMERevisit-After CONTENT7 days 2. 有没有在CSS3这些激动人心的新标签 font-smooth:always;
-webkit-font-smoothing: antialiased;还不是做了很多的测试和他们自己虽然 CodeGo.net他们几乎肯定不会得到什么好处的IE浏览器。可以在Windows或也许火狐虽然。上次我检查它们会自动没有反锯齿小东西就像他们在OSX系统。 更新 这些都不是在IE或Firefox的支持。字体光滑标签仅适用于iOS的Safari浏览器据我 3. 哦是的您可以 -webkit-font-smoothing: antialiased;
/* -moz-font-smoothing: antialiased; - No longer available in FF */
font-smoothing: antialiased;3. 只能说是神器 !function(){var scaleHwindow.innerHeight / 516;var resizes document.querySelectorAll(.resize);for (var j 0; j resizes.length; j) {var rresizes[j];r.style.width parseInt(r.style.width) * scaleW px;r.style.height parseInt(r.style.height) * scaleH px;r.style.top parseInt(r.style.top) * scaleH px;r.style.left parseInt(r.style.left) * scaleW px;}}();var scaleW window.innerWidth / 320;$(#viewport).attr(content, width320, initial-scale scaleW , user-scalable0); 4. 自适应布局模式 -webkit-box; 父级 display:-webkit-box; -webkit-box-orient: horizontal; 水平/垂直 子级: -webkit-box-flex: 1; (比例为1) -webkit-box-flex: 2; (比例为2) -webkit-box-flex: 3; (比例为3) 平均分布。 5. 控制ios自动开启字母大写 autocapitalize off 关闭大写 6. 阻止IOS长按屏幕时的弹出菜单/保存图片 -webkit-touch-callout: none; (inherit 不被禁用) 7. 阻止IOS用户选择页面文字 -webkit-user-select:none; 8. 设置链接获取焦点时的背景色 -webkit-tap-highlight-color: rgba(0,0,0,.5); (可一是一个透明色); 9. IOS中如何获取滚动条的值(android设备可以获取到值但ios不能) 可以通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。 10. 移动端适配方法 !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title
/head
bodyiphone 3G 物理尺寸 屏幕密度ppi 像素分辨率px(320*480) 逻辑分辨率ptiphone4 (640*960) iphone5 (640*1136)iphone5s 4 326 (640*1136) (326*568)iphone6 4.7 326 (750*1334) (375*667)iphone6Plus 5.5 401 (1242*2208) (414*736) ipad (768*1024)ipad retina (1536*2048)android (480*800)android (480*854)android (540*960)android (600*1024)android (720*1280)android (800*1280)android (1048*1920)通常选择iphone6作为基准尺寸原因 从中间尺寸向上和向下适配时调整的幅度最小实现文字流式(fluid)控件弹性(flexible)图片等比缩放(scale)media 适配不同尺寸手机 (device-pixel-ratio 为设备像素与设备独立像素比 iphone6为2)media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */}media only screen and (max-device-width :480px){ }media only screen and (min-device-width :481px){ }/*6*/media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ }/*6*/media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ }/*魅族*/media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ }/*mate7*/media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ }/*4 4s*/media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ }根据不同设备宽度在根元素上设置不同字体大小一般会设置1rem为1/10屏幕宽度;(function(win) {var doc win.document;var docEl doc.documentElement;var tid;function refreshRem() {var width docEl.getBoundingClientRect().width;if (width 540) { // 最大宽度width 540;}var rem width / 10; // 将屏幕宽度分成10份 1份为1remdocEl.style.fontSize rem px;}win.addEventListener(resize, function() {clearTimeout(tid);tid setTimeout(refreshRem, 300);}, false);win.addEventListener(pageshow, function(e) {if (e.persisted) {clearTimeout(tid);tid setTimeout(refreshRem, 300);}}, false);refreshRem();})(window);根据 devicePixelRatio 设定 initial-scale 来放大 viewport使页面按照物理像素渲染提升清晰度/*** MobileWeb 通用功能助手包含常用的 UA 判断、页面适配、search 参数转 键值对。* 该 JS 应在 head 中尽可能早的引入减少重绘。** fixScreen 方法根据两种情况适配该方法自动执行。* 1. 定宽 对应 meta 标签写法 -- meta nameviewport contenttarget-densitydpidevice-dpi,width750* 该方法会提取 width 值主动添加 scale 相关属性值。* 注意 如果 meta 标签中指定了 initial-scale 该方法将不做处理即不执行。* 2. REM: 不用写 meta 标签该方法根据 dpr 自动生成并在 html 标签中加上 data-dpr 和 font-size 两个属性值。* 该方法约束IOS 系统最大 dpr 3其它系统 dpr 1页面每 dpr 最大宽度即页面宽度/dpr 750REM 换算比值为 16。* 对应 css 开发任何弹性尺寸均使用 rem 单位rem 默认宽度为 视觉稿宽度 / 16;* scss 中 $ppr(pixel per rem) 变量写法 -- $ppr: 750px/16/1rem;* 元素尺寸写法 -- html { font-size: $ppr*1rem; } body { width: 750px/$ppr; }。*/window.mobileUtil (function(win, doc) {var UA navigator.userAgent,isAndroid /android|adr/gi.test(UA),isIos /iphone|ipod|ipad/gi.test(UA) !isAndroid, // 据说某些国产机的UA会同时包含 android iphone 字符isMobile isAndroid || isIos; // 粗略的判断return {isAndroid: isAndroid,isIos: isIos,isMobile: isMobile,isNewsApp: /NewsApp\/[\d\.]/gi.test(UA),isWeixin: /MicroMessenger/gi.test(UA),isQQ: /QQ\/\d/gi.test(UA),isYixin: /YiXin/gi.test(UA),isWeibo: /Weibo/gi.test(UA),isTXWeibo: /T(?:X|encent)MicroBlog/gi.test(UA),tapEvent: isMobile ? tap : click,/*** 缩放页面*/fixScreen: function() {var metaEl doc.querySelector(meta[nameviewport]),metaCtt metaEl ? metaEl.content : ,matchScale metaCtt.match(/initial\-scale([\d\.])/),matchWidth metaCtt.match(/width([^,\s])/);if ( !metaEl ) { // REMvar docEl doc.documentElement,maxwidth docEl.dataset.mw || 750, // 每 dpr 最大页面宽度dpr isIos ? Math.min(win.devicePixelRatio, 3) : 1,scale 1 / dpr,tid;docEl.removeAttribute(data-mw);docEl.dataset.dpr dpr;metaEl doc.createElement(meta);metaEl.name viewport;metaEl.content fillScale(scale);docEl.firstElementChild.appendChild(metaEl);var refreshRem function() {var width docEl.getBoundingClientRect().width;if (width / dpr maxwidth) {width maxwidth * dpr;}var rem width / 16;docEl.style.fontSize rem px;};win.addEventListener(resize, function() {clearTimeout(tid);tid setTimeout(refreshRem, 300);}, false);win.addEventListener(pageshow, function(e) {if (e.persisted) {clearTimeout(tid);tid setTimeout(refreshRem, 300);}}, false);refreshRem();} else if ( isMobile !matchScale ( matchWidth matchWidth[1] ! device-width ) ) { // 定宽var width parseInt(matchWidth[1]),iw win.innerWidth || width,ow win.outerWidth || iw,sw win.screen.width || iw,saw win.screen.availWidth || iw,ih win.innerHeight || width,oh win.outerHeight || ih,ish win.screen.height || ih,sah win.screen.availHeight || ih,w Math.min(iw,ow,sw,saw,ih,oh,ish,sah),scale w / width;if ( scale 1 ) {metaEl.content metaCtt , fillScale(scale);}}function fillScale(scale) {return initial-scale scale ,maximum-scale scale ,minimum-scale scale;}},/*** 转href参数成键值对* param href {string} 指定的href默认为当前页href* returns {object} 键值对*/getSearch: function(href) {href href || win.location.search;var data {},reg new RegExp( ([^?])(([^]*))?, g );href href.replace(reg,function( $0, $1, $2, $3 ){data[ $1 ] $3;});return data;}};})(window, document);// 默认直接适配页面mobileUtil.fixScreen();
/body
/html View Code 待续…… 转载于:https://www.cnblogs.com/fanxiaowu/p/4632717.html
