学习
实践
活动
工具
TVP
写文章

移动网站怎样SEO优化?

关于移动网站优化的问题,很多用户都会咨询用哪种架构移动站。不少SEOer貌似对独立移动站,也就是单独的m.domain.com站有不小的执念,认为独立移动站才是效果最好的。 版,移动设备得到的HTML代码是专门做了移动优化的移动版本。 独立移动站(separate m. site) : 移动站的URL和PC站是不一样的,通常用单独的子域名,比如PC站是www.talklee.com,移动站是m.talklee.com,当然移动站的HTML 现在排名靠前的m.站居多,很可能这些站绝大部分是老站(所以才排名能力高嘛),而几乎所有老站当初开始移动SEO时都是从m站入手的,不到万不得已,这些使用m站的老站不会去改为响应式设计,因为改动太大了,冒险 但这不说明一个新站就要学着m站啊。

28120

移动页面使用rem来适配

=50px,例如 html{ font-size: 10px; } p{ width: 2rem; /* 2*10 = 20px;*/ margin: 1rem; } rem来适配 以前我们往往这样页面:viewport width 设置为 device-width,然后选我们需要兼容设备的最小宽度(一般是320px)。 根据这最小宽度来页面。单位使用px和百分比。在宽度不同的设备上,页面的字体大小,内容尺寸都是一样的,不同的是,大屏的内容间的空隙比小屏的大。 所以这样的缺点就是,页面在某些尺寸的设备上显示的效果不好。 如果用rem来页面,我们会根据不同的设备宽度在根元素上设置不同的字体大小。宽度越宽,字体越大。然后对原本使用px的地方使用rem来替换。 代码见这里 2 页面时 将设计稿的宽度缩放至 640px。在上一步中,1rem 为此时设计稿中 100px 的值。屏幕的宽度也就是 (640 / 100) = 6.4rem。

31430
  • 广告
    关闭

    2022腾讯全球数字生态大会

    11月30-12月1日,邀您一起“数实创新,产业共进”!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Vue:移动 UI 如何适配?

    导语 | 移动 UI 适配其实很简单。这里仅指手机,iPad 及 PC 需要另打算。 目录 三类法 三规则 为什么选择 iPhone6 基准 本文大约 1000 字,阅读 5 分钟。 iPhone 仅手机就有这么多尺寸: ? 每种尺寸都要单独做一套 UI 及样式吗,显然不现实。合理的做法是将设备尺寸分为三类,只处理三类尺寸。Android 适配亦是如此。 ? 这是淘宝团队使用的开发模式,大概分为四步: 一,视觉设计阶段,设计师按宽度750px(iPhone 6)设计稿。设计定稿后在750px的设计稿上标注,输出标注图。 上下调整三规则: 样式适配规则 在第四步样式配置时,有三个规则: 文字流式,控件弹性,图片等比缩放。 图示: ? 如果所有尺寸下的图片资源,都使用3倍图,会不会有些浪费带宽?有没有办法改进。 设计师可以产出1倍、2倍、3倍图三种,然后在每种 media 内,根据需要分别不同的引用。 选谁基准: 为什么选择 iPhone 6 作为基准?

    94320

    HTML5新增的几个a标签属性 移动

    HTML5新增的几个移动a标签属性 移动终端拨号: 代码: 13800138000 实例:点击拨号:13800138000 移动终端发信息 此处a标签的 download可以写成 download="download; 声明:本文由w3h5原创,转载请注明出处:《HTML5新增的几个a标签属性 移动》 https://www.w3h5.

    44500

    HTML5移动开发的常用触摸事件

    HTML5移动开发的常用触摸事件 h5开发手机是经常会有触摸事件和滑动事件 HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略 因为iOs设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时候,PC的鼠标和键盘事件是不够用的。    在iPhone 3Gs发布的时候,其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后,Android上的浏览器也实现了相同的事件。

    11310

    html5开发手机网页(移动web开发的几种方式)

    不要把html5这玩意想的太高深,其实做手机网站,真正意义上用不到什么的html5的强大功能。(可能对于一些不懂什么技术的小白而言:你的手机网站是用HTML5+CSS3的啊,简直牛逼呀! 其实明眼人一看,就知道是用什么技术的。俗话说的好:”外行看热闹,内行看门道“) 好了扯了这么多,下面就说说怎么来开发移动手机网站吧! 基本上开发手机网站,可大致分为两大类。

    </body> </html> 下面是我的基于微信二次开发的手机页面案例: 点击预览 其实在移动的开发让我纠结的是在字体单位上的选择。 目前来说,就移动的淘宝首页就是采用rem来作为单位来布局的。关于使用rem单位这个问题以及它的好处:还得需要大神来解答这个问题,毕竟我也只是刚接触。 对于移动的JS效果可能和PC有些不同,因为移动移动的事件,这也是我为什么老是强调学JS,是学原生JS,而不是学Jquery。我的下篇文章就会讲到”为什么学JS要学原生JS”。

    22640

    html5移动手机页面怎么自适应

    引入文件后会发现html这个根的font-size在iphone6的情况下37.5px,按照尺寸就可以进行布局了,当然布局也是rem单位

    15520

    html5移动禁止长按图片保存的实现

    移动访问H5页面的时候,长按图片就会把图片保存起来,为了能够让用户体验更好一些,我们需要长按的时候也不保存图片。那该如何实现呢?下面给出3种解决方案。 方案一:使用 pointer-events:none img{ pointer-events:none; } 亲测有效,适用于微信客户的手机页面,图片被打开的情况 方案二:全局css属性 *

    10730

    使用HTML5播放音频在移动不能循环

    ♚ 做了一个H5页面,需要一个mp3做为背景音乐,在PC调试没问题,然后用手机扫码打开结果就不能循环播放,记录踩过的坑 最开始是这样式儿的 ? PC没问题,无限循环播放,可是手机就只播放一遍,各种度娘~~~,终于找到方法,如下 ?

    29930

    java移动开发_移动开发

    1.移动端视口问题 视口是指浏览器的可视区域,移动的视口到底是多宽呢? 现在市面上的大部分手机,比如iphone X,它的默认视口宽度为980px,而一个iphone X的屏幕宽度仅仅为375px。 我们可以使用谷歌浏览器的移动调试工具,来访问百度的搜索结果,可以看到网页明显被缩小了,而且页面宽度定格在980px(不信的话大家可以试试)。 (当然,想要内部滑动可以自己设置啊),正常情况下,我们都会应用到上面的那一串代码(在这里说个题外话,我这两天项目就有一次忘记添加这段代码,结果找半天找不出来原因,后来一问我的授课老师才发现原因(笑哭) 3.移动尺寸 是同一个网页在不同尺寸手机中的效果。 注意:在移动,如果使用了背景图(比如雪碧图),记得用同样的方式调整背景图的尺寸。 题外话:移动看上去是不是很麻烦?视口那么小,还要引入各种东西,里面要添加的又杂又乱,还要计算数值,是不是很麻烦?

    8320

    企业选择Html5移动开发要慎之又慎

    Html5问世的那天起,Html5的神奇功能就被无限放大,曾有分析师认为:Html5将开启移动互联网的无界之争,可是FaceBook抛弃Html5时,人们才幡然醒悟,Html5并非移动互联网的万能钥匙 ,特别是企业级移动市场,选择Html5绝非明智的选择,那么Html5能否取代手机应用程序,也许在下面的内容中你会找到答案。 本机应用程序的优势 一般来说,对于开发移动设备的应用程序,开发人员通常会将其设计成”只适合在本机使用”─也就是你得从应用程序商店购买,并安装在你的手机内存中,应用程序来会执行。 本机应用程序的麻烦 长期以来,有限资源的设计人员经常会选择开发可在苹果iOS设备和Android设备运作的应用程序,因为这样,会使他们能够让其所发展的应用程序执行在多数的手机平台上。 虽然官方W3C在2014年之前不会将HTML5的标准完成定案,但许多最现代化的移动设备浏览器已经支持HTML5,而有不少Web设计人员也都已经开发为数不小的HTML5网站。

    61040

    lib-flexible引入到Vue移动rem布局

    第三步 去index.html里把meta name="viewport标签注释掉"

    69820

    10-移动开发教程-移动事件

    在前端的移动Web开发中,有一部分事件只在移动产生,如触摸相关的事件。接下来给大家简单总结一下移动的事件。 1. PC事件在移动的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能 移动特有的touch事件 由于移动设备大都具备触摸功能,所以移动浏览器都引入了触摸(touch)事件。 封装移动tap事件 由于点击事件经常使用,如果用click会有延迟问题,一般我们会用touch事件模拟移动的点击事件, 以下是封装的几个事件,仅供参考。 ---- 参考文章: 移动web开发---Touch事件详解 MDN:TouchEvent 移动前端常见的触摸相关事件touch、tap、swipe等整理

    1.2K70

    10-移动开发教程-移动事件

    在前端的移动Web开发中,有一部分事件只在移动产生,如触摸相关的事件。接下来给大家简单总结一下移动的事件。 1. PC事件在移动的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能 移动特有的touch事件 由于移动设备大都具备触摸功能,所以移动浏览器都引入了触摸(touch)事件。 封装移动tap事件 由于点击事件经常使用,如果用click会有延迟问题,一般我们会用touch事件模拟移动的点击事件, 以下是封装的几个事件,仅供参考。 ---- 参考文章: 移动web开发---Touch事件详解 MDN:TouchEvent 移动前端常见的触摸相关事件touch、tap、swipe等整理

    1.3K80

    移动基础

    移动基础 移动浏览器我们主要针对webkit内核进行兼容 现在移动碎片化比较严重,分辨率和屏幕尺寸大小不一 1.移动调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC页面1px就等于1个物理像素,但移动不同 一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比 3.2 4.1单独移动页面(主流) 通常情况下,网址域名前面加m(mobile)可以打开移动。 通过设备判断,如果是移动打开,则自动跳转到移动页面。 ,需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动技术解决方案 1.移动浏览器 移动浏览器基本以webkit内核为主,所以就考虑webkit兼容性问题。

    13210

    移动适配

    实习期间主要在写微信H5,遇到的最大问题就是适配各个不同尺寸的屏幕。公司就我自己一个前端,只能自己摸索着来。 对于工作量小的项目,这个方法还是简单有效的,当然没办法覆盖所有设备,只是一个没办法的办法,这样其实很痛苦,工作量也大。 简单讲就是用 js 动态改变 <meta> 标签,然后用rem作为单位,因为rem就是根据font-size来计算的,由此对不同屏幕尺寸进行适配。 神器。以后的项目应该都会使用这个方案。

    35920

    移动基础

    移动浏览器我们主要针对webkit内核进行兼容   现在移动碎片化比较严重,分辨率和屏幕尺寸大小不一 1.移动调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC页面1px就等于1个物理像素,但移动不同 一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比 3.2 4.1单独移动页面(主流) 通常情况下,网址域名前面加m(mobile)可以打开移动。 通过设备判断,如果是移动打开,则自动跳转到移动页面。 ,需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动技术解决方案 1.移动浏览器 移动浏览器基本以webkit内核为主,所以就考虑webkit兼容性问题。

    16831

    移动基础

    移动浏览器我们主要针对webkit内核进行兼容 现在移动碎片化比较严重,分辨率和屏幕尺寸大小不一 1、移动调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 搭建本地 是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC页面1px就等于1个物理像素,但移动不尽相同 一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比 4.1单独移动页面(主流) 通常情况下,网址域名前面加m(mobile)可以打开移动。 通过设备判断,如果是移动打开,则自动跳转到移动页面。 ,需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动技术解决方案 5.1移动浏览器 移动浏览器基本以webkit内核为主,所以就考虑webkit兼容性问题。

    24720

    扫码关注腾讯云开发者

    领取腾讯云代金券