stevenjoezhang / live2d-widget

把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platform

Home Page:https://zhangshuqiao.org/2018-07/在网页中添加Live2D看板娘

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Needing A live widget for android home screen

Stretch379 opened this issue · comments

shared_report.png

Change the code of loading parts of "autoload.js" to this:

//判断移动端用户方法
function isMobile() {
    var userAgent = navigator.userAgent || window.opera;

    if (/android/i.test(userAgent) || /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return true;
    }
}
// 加载 waifu.css live2d.min.js waifu-tips.js
if (isMobile()) {
	//移动端用户
	Promise.all([
		loadExternalResource(live2d_path + "waifu-mobie.css", "css"),
		loadExternalResource(live2d_path + "live2d.min.js", "js"),
		loadExternalResource(live2d_path + "waifu-tips.js", "js")
	]).then(() => {
		// 配置选项的具体用法见 README.md
		initWidget({
			waifuPath: live2d_path + "waifu-tips.json",
			//apiPath: "https://live2d.fghrsh.net/api/",
			cdnPath: "**Your javascript path**",
			tools: ["hitokoto", "asteroids", "switch-model", "switch-texture", "photo", "info", "quit"]
		});
	});
} else {
	//pc端用户
	Promise.all([
		loadExternalResource(live2d_path + "waifu.css", "css"),
		loadExternalResource(live2d_path + "live2d.min.js", "js"),
		loadExternalResource(live2d_path + "waifu-tips.js", "js")
	]).then(() => {
		initWidget({
			waifuPath: live2d_path + "waifu-tips.json",
			//apiPath: "https://live2d.fghrsh.net/api/",
			cdnPath: "**Your javascript path**",
			tools: ["hitokoto", "asteroids", "switch-model", "switch-texture", "photo", "info", "quit"]
		});
	});
}  

Then,copied the waifu.css and edit the part of it into this:

#waifu-toggle {
	background-color: #fa0;
	border-radius: 5px;
	bottom: 10px;
	color: #fff;
	cursor: pointer;
	font-size: 12px;
	left: -10px;
	margin-left: -100px;
	padding: 5px 2px 5px 5px;
	position: fixed;
	transition: margin-left 1s;
	width: 30px;
	writing-mode: vertical-rl;
}

And then renamd it into "waifu-mobie.css" for phone visitors to load it and show the live widget.