字体压缩(字蛛)
一个17M多的字体能压缩到只有14KB.
视频全屏播放, object-fit
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。一般用于 img 和 video 标签,可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。效果同background-size类似;
可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。效果同background-position类似; 对于图片居中的可用以下方式实现。
<style> img { height: 250px; width: 250px; border: 1px solid red; object-position: right top; object-fit: none; } </style> <img src="https://interactive-examples.mdn.mozilla.net/media/examples/moon.jpg">
注:object-fit 不兼容IE,需引 bideo.js 示例:gitee.com/yuebing1212…
3, 同一字体不同类型效果会不一样,
Normal 会出现一段文字看起来像2个字体
ios 微信浏览器打开时没有底部前进后退状态栏问题
//解决 ios 微信浏览器打开时没有底部前进后退,跳转后才有。 该方法可以保持一直有,方便做全屏用function pushHistory() { var state1 = { title: "title", url: "#" }; window.history.pushState(state1, "title", "#");}
语言包切换
用对象Key相同,value不同的方式实现。
var language = { ch: { '回到主页': '回到主页', '愿景': '愿景', }, en: { '回到主页': 'SUMMARY', '愿景': 'VISION', }}
$('.open-close').click(function() { let lang = $(this).hasClass("en") ? 'cn' : 'en'; $(this).toggleClass("en"); eachLang(lang); }); function eachLang(lang) { $('[data-lau]').each(function(e) { var name = $(this).data('lau') if (lang == 'cn') { $(this).html(language.ch[name]) } else { $(this).html(language.en[name]) } }); }
视频 ios 需引微信sdk
//解决微信不能自动播放问题
// ios 需引微信sdk document.addEventListener("WeixinJSBridgeReady", function () { myVideo.play();}, false);//安卓let myVideo = document.getElementById("media");document.addEventListener('touchstart', function () { myVideo.play();}, false);