Sun ufologist

我的目标是成为一个热爱互联网, 善用互联网, 既懂产品又懂技术的前端架构师

ufologist / autoplay-audio-ios.html

Created December 3, 2015 03:55

在 iOS 微信浏览器中自动播放 HTML5 audio(音乐) 的正确方式

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Auto play html audio in iOS WeChat InAppBrowser the right way</title>
	</head>
	<body>
	<h1>在 iOS 微信浏览器中自动播放 HTML5 audio(音乐) 的正确方式</h1>
	<p>核心原理: 在微信的JS-API 中 play 一下 audio 即可达到自动播放的目的(应该是微信自己做了处理)</p>

ufologist / svg-clippath-dynamically.html

Created October 22, 2015 02:19

Define SVG clipPath dynamically

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Define SVG clipPath dynamically</title>
	</head>
	<body>
	<h1>Define SVG clipPath dynamically</h1>
	<!--
	<h2>Preview static</h2>

ufologist / svg-innerhtml-workaround.html

Created August 26, 2015 04:46

svg.innerHTML workaround

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<title>svg.innerHTML workaround</title>
	</head>
	<body>
	<div>
	<button onclick="innerHTMLNormal()">svg.innerHTML</button>

ufologist / ios6-viewport-scale-bug-fix.html

Last active November 11, 2015 08:10

Fix iPhone4/iOS6 browser viewport appear black or white area bug!!

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Fix iPhone4/iOS6 browser viewport appear black or white area bug!!</title>
	<!--
	关键是要注意在初始化页面时设置 viewport width=320.1, 非常之诡异!

	PS: 在查了N多资料, N多尝试后发现, 其实只要不将width设置成320或device-width即可, 其他任何数字都可以! 不设置width这个属性也可以!

ufologist / touchend-doesnot-fire.html

Created September 19, 2014 07:42

fixbug: touchend doesn't fire on mobile devices

	<!DOCTYPE html>
	<html>
	<head>
	<title>touchend doesn't fire on mobile devices</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
	<style>
	body {
	background-color: #eee;
	}

ufologist / baidu-map-click-offset.html

Created September 3, 2014 08:12

修正百度地图pinch zoom in后的偏移

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>修正百度地图pinch zoom in后的偏移</title>
	<style>
	html,
	body,
	#allmap {
	width: 100%;

ufologist / baidu-map-quick-animation-marker.html

Created April 16, 2014 08:47

百度地图 JavaScript API 极速版带动画的标注点

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>百度地图 JavaScript API 极速版带动画的标注点</title>
	<style>
	.map {
	width: 500px;
	height: 300px;
	}

ufologist / baidu-map-quick-draggable-marker.html

Created April 16, 2014 08:00

百度地图 JavaScript API 极速版可拖拽的标注点

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>百度地图 JavaScript API 极速版可拖拽的标注点</title>
	<style>
	.map {
	width: 500px;
	height: 300px;
	}

ufologist / css-transform-stacking-context.html

Created April 4, 2014 07:16

CSS3 Transform create new stacking context

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>CSS3 Transform create new stacking context</title>
     <style>
     .transform-el,
     .bottom-el {
         position: absolute;
         height: 120px;

ufologist / baidu-map-quick-custom-overlay.html

Created March 3, 2014 14:59

百度地图 JavaScript API 极速版自定义覆盖物

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>百度地图 JavaScript API 极速版自定义覆盖物</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />
	<style>
	body,
	html,
	#mapdemo {