辉煌电商SEO内测

百度关键词优化三天上首页!同行都是朋友, 欢迎一起互利共赢。谢绝一切非正规行业服务,感谢以下同行、团队、平台和代理的支持:

百度站长平台、MIP开发小组、SEO焦大老友、SEO每天一贴ZAC大哥、卢松松大哥、海瑶SEO兄弟、附子SEO兄弟、探索者SEO、帮站SEO好友、互点宝、超快排平台

百亿互刷宝、下拉天下、SEO自学网、SEO研究中心、小明SEO、王德春SEO、马海祥博客、踏雪无痕挂机工作室、SEO云优化好友、云客网、杭州思亿欧、网赚吧、北京SEO韩非老弟

需要了解以上同仁的相关信息,我们已经给你做好了搜索框,看右上角绿色那个,输入搜索即刻直达

网站统计: 共有读稿:14376部 / 今日更新:1篇 / 评论:18条 / 会员:69 名 / 阅读:702218
您好,请 【登陆】/【注册】
软件内容页横幅广告
您现在的位置:SEO平台 > SEO赚钱 >

HTML5实践 :非响应式设计中使用ViewPort meta标签

2018.02.26

浏览:

【导语】如果您觉得本篇内容还不错,请点击文章下面的赞,然后分享给朋友哦!...

大家都知道viewport标签对于响应式设计的意义,但是你们可能不清楚,他对于非响应式设计也有相当的作用。如果你的站点还是非响应式的,那么通过本文你将学会,...请看详情...

seo

seo

 

  大家都知道viewport标签对于响应式设计的意义,但是你们可能不清楚,他对于非响应式设计也有相当的作用。如果你的站点还是非响应式的,那么通过本文你将学会,如何使用viewport标签增强你站点在mobile设备上的显示效果。

  Viewport标签的一般使用

  Viewport meta标签一般用在响应式设计中,用来设计mobile设备viewport的宽度和initial-scale。

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  在非响应式设计中使用Viewport

  大家都知道,iphone默认的viewport宽度是980px。但是你的设计可能不符合这个范围,有时候宽点,有时候窄点。下面两个例子将向你展示,在什么情况下可以使用viewport标签来增强在mobile设备上非响应式设计中的展示效果。

  例子

  在iphone查看 Themify 站点。  

 

  截屏左边的图片展示了,站点在没有使用viewport标签时的效果,我们可以看到页面抵到了屏幕的边缘。截屏右边的图片是我添加了viewport标签后的效果,我将viewport的宽度设置为1024,这时的页面和手机屏幕在左右都将保持一定的距离。

  

  另外一个例子

  如果你设计的太窄,也会出现问题。假设你的设计时非响应式的,容器宽度是700px,这时的效果就像截屏左侧的图片,将会在手机屏幕右侧产生一个很大的空隙。

  

 

  我们可以通过简单的添加一个720px宽度的viewport,来修复这个问题。我们没有对你的设计进行改变,但是iphone会做出调整,来适应你的720px宽度。

  <meta name="viewport" content="width=1024">

  通常的错误

  一个通常的错误是,人们会为非响应式设计设置 initial-scale=1 参数。这样页面将会以100%的比例展示,不会进行比例的调整。这样人们就不得不移动页面或者执行缩小的操作,来查看整个页面。最糟糕的情况是,人们把 user-scalable=no 或者 maximum-scale=1 结合 initial-scale=1一起使用。这会禁用站点的缩放的功能,用户将不可能通过这种方式查看到整个页面。所以你一定要记住,如果你的站点不是响应式设计的,那么就不要这么设置!

  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

0
赞一个
☆喜欢这篇文章吗?分享给你的好友吧!点击这里复制网址☆
共有15人阅读,期待你的评论!评论
请先登陆后才能发表评论哦!没账号?赶紧注册一个吧!
最新评论
热门标签
回到顶部