flexible.js是淘宝推出的一款移动端手机自适应的库,源码内容很简洁,当网页使用了该库之后,页面会在head中加入对应的页面响应式的meta标签。

当使用flexible.js的时候,引入百度联盟的广告代码,会发现广告的文字会异常小,因为本身自己项目文字字号是根据data-dpr来响应式判断显示不同大小的,而百度联盟广告的直接按默认那像素显示。经过层层试验发现,字体显示大小和页面缩放比例有关系,这里需要修改一下flexible.js的源码,如图

如图,把原来的scale=1/dpr改为scale=1,发现页面中字体大小显示等都没有影响,但是百度联盟的广告文字可以正常显示了。

如果页面没有使用flexible.js,使用了我以前文章写过的一段移动端自适应代码,这里把750按逻辑像素414 写就可以正常展示。

移动端网页使用flexible.js加入百度联盟广告样式不一致问题解决的更多相关文章

  1. 移动端自适应:flexible.js可伸缩布局使用

    http://caibaojian.com/flexible-js.html 阿里团队开源的一个库.flexible.js,主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题. 实现 ...

  2. 移动端适配方案 flexible.js

    前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案 ...

  3. 转载:移动端自适应:flexible.js可伸缩布局使用

    阿里团队开源的一个库.flexible.js,主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题. 实现方法: 通过JS来调整html的字体大小,而在页面中的制作稿则统一使用rem这 ...

  4. 百度联盟广告 http://cpro.baidustatic.com/cpro/ui/c.js

    <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript" ...

  5. vue如何加入百度联盟广告

    在百度联盟代码位管理中创建好对应的代码位之后,点击获取代码,会看到这样一段js 直接复制粘贴到自己网页中便可显示对应广告. 在vue中由于都是vue组件,不支持直接在组件中加入这样一段一段的js代码, ...

  6. rem自适应布局-移动端自适应必备:flexible.js

    http://caibaojian.com/flexible-js.html

  7. Vue移动端flexible.js+MuseUi

    因为公司有个项目需求,手机端的.之前就写了一个一样的项目,只不过是用原生的写的,心想刚写了个vue后台管理系统,何不也用vue写,所有就没有把之前的利用过来.那么问题来了,要让手机端自适应我们该怎么做 ...

  8. 从flexible.js引入高德地图谈起的移动端适配

    曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...

  9. vue脚手架搭建移动端项目--flexible.js

    通过命令行 node -v 查看是否安装node环境 在 nodejs 和 webpack已安装的前提下,随便一个文件夹下,输入命令行 npm install vue-cli -g 安装完成后,通过 ...

随机推荐

  1. [转]JAVA反射中的getFields()方法和getDeclaredFields ()方法的区别

    关于获取类的字段有两种方式:getFields()和getDeclaredFields().我们先来看看这两者的区别吧: getFields():获得某个类的所有的公共(public)的字段,包括父类 ...

  2. [转]启动Tomcat提示:指定的服务未安装

    原文地址:http://blog.csdn.net/yilip/article/details/8066246 新下载的Tomcat7.0 解压缩完了运行tomcat7.exe屏幕一闪就没了 运行to ...

  3. WPF中Name和x:Name

    x:Name用来在XAML中表示一个制定对象的名称:可以通过它来访问XAML对应的资源: Name在.net的很多类中都存在,在WPF中可以和x:Name互换. 结果: 1. 在XAML中只存在x:N ...

  4. GODOT 3.0 开发进度汇报 #6

    经过了又一个月的开发工作,在此作进度报告.本月的工作可以划分为:完成Web导出工具开发.GDNative.以及新的粒子系统. Web Export Godot 现在有了一款实验性的导出工具,导出目标为 ...

  5. WebStorm 7.0 支持更多的Web技术

    JetBrains刚刚发布了WebStorm 7.0 GA,支持EJS.Mustache.Handlebars.Web组件.Stylus.Karma.Istanbul.Compass,并增强了很多功能 ...

  6. .Net程序帮助文档制作

    一,准备工作 1,首先介绍一款VS的代码注释插件GhostDoc 你也许认为我们在代码中敲入///就能自动生成xml注释,但这种注释是没有说明文字的.而GhostDoc可以生成一些简单的说明文字,如果 ...

  7. 【css】css 背景色渐变兼容写法

    最近在项目中,有很多地方都用到了线性渐变,比如:表单提交按钮的背景,数据展示的标题背景等等,按照以前的做法是切 1px 图片然后 repeat-x.下面我将介绍如何用 css 来完成该效果. css3 ...

  8. Error:Error converting bytecode to dex: Cause: com.android.dex.DexException: Multiple dex files define Lcom/lidroid/xutils/task/TaskHandler;

    Error:Error converting bytecode to dex: Cause: com.android.dex.DexException: Multiple dex files defi ...

  9. SharePoint 2013 Support for Windows Server 2012 R2

    Summary Currently, Microsoft SharePoint Server 2013 is not supported for installation on computers r ...

  10. js if判断 遍历 替换图片地质

    <script> $(document).ready(function() { var s = "The rain in Spain falls mainly in the pl ...