Skip to content

Instantly share code, notes, and snippets.

View ufologist's full-sized avatar

Sun ufologist

298 followers · 192 following
View GitHub Profile
@ufologist
ufologist / wechat-share-default.html
Created July 13, 2016 07:12
微信分享的默认机制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微信分享的默认机制</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<img src="http://placeholder.qiniudn.com/300x300" width="0" height="0" style="position:absolute">
<h1>微信分享的默认机制</h1>
@ufologist
ufologist / body-ovh-on-mobile-device.html
Created June 3, 2016 07:38
body overflow:hidden on mobile device
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>body overflow:hidden on mobile device</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
html,
body {
height: 100%;
@ufologist
ufologist / html-input-keyboard-overlay.html
Created June 2, 2016 06:20
手机上输入框(input/textarea)被弹出键盘遮挡的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手机上输入框(input/textarea)被弹出键盘遮挡的问题</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
html,
body {
height: 100%;
@ufologist
ufologist / html2canvas-snapshot-invisible.html
Created May 31, 2016 09:37
html2canvas snapshot invisible DOM in a scrollable div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html2canvas snapshot invisible DOM in a scrollable div</title>
<style>
/* 为了在页面上能够更好地观察到 canvas 元素 */
html,
body {
height: 100%;
@ufologist
ufologist / framework7-img-callout.html
Created May 26, 2016 04:01
解决使用了 Framework7 后图片无法长按保存的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Framework7 img callout</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="http://cdn.bootcss.com/framework7/1.4.2/css/framework7.ios.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/framework7/1.4.2/css/framework7.ios.colors.min.css">
@ufologist
ufologist / android-wx-startrecord-no-touchend.html
Created April 28, 2016 09:05
android wx.startRecord NO touchend
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>android wx.startRecord NO touchend</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<h1>在 Android 微信上 touchstart 时调用 wx.startRecord 会导致不会触发 touchend 事件</h1>
<div>
@ufologist
ufologist / mask-unfold-css-animation.html
Created March 31, 2016 12:03
Mask unfold css animation 蒙板展开动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mask unfold css animation</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
body {
background-color: #ccc;
}
@ufologist
ufologist / ignore-browser-scrollbar-width.html
Created March 30, 2016 08:33
"Ignore" browser scrollbar width on PC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>"Ignore" browser scrollbar width on PC</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
.container {
width: 300px;
height: 150px;
@ufologist
ufologist / jqueryui-draggable-click.html
Created December 17, 2015 04:55
jQuery UI Draggable click
<!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>jQuery UI Draggable click</title>
<style>
body {
background-color: #eee;
}
@ufologist
ufologist / fake-autoplay-audio-ios-safari.html
Created December 3, 2015 06:16
Fake auto play html audio in iOS Safari the right way
<!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>Fake auto play html audio in iOS Safari the right way</title>
</head>
<body>
<h1>在 iOS Safari 中假装自动播放 HTML5 audio(音乐) 的正确方式</h1>
<p>核心原理: 通过一个用户交互事件来主动 play 一下 audio</p>