<video class="swiper-slide-img" loop playsinline="" autoplay="" muted="" id="bgvid" src="{{ img_url($item->video) }}"></video>
Reference
<video class="swiper-slide-img" loop playsinline="" autoplay="" muted="" id="bgvid" src="{{ img_url($item->video) }}"></video>
Reference
The image size is key. At least 192×192
1 2 3 |
<link rel="icon" href="{{ url('/images/icons/icon-tea.png') }}" type="image/png" /> <link rel="apple-touch-icon" href="{{ url('/images/icons/icon-tea.png') }}" /> |
Reference:
1 2 3 4 |
<form id="iform" name="iform" action="/test/video/upload" method="post" enctype="multipart/form-data"> <input type="file" name="file"> <button type="submit" class="btn btn-primary">Submit</button> </form> |
Print variable and objects
1 |
{{ feature|json_encode }} |
https://www.branchcms.com/learn/docs/developer/twig/filters
Comments
1 |
{# This will be a comment #} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> </tbody> </table> |
Bootstrap:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
let initCanvas = function(){ // Canvas DOM 元素 let canvas = document.getElementById('canvas_cxr') let ctx = canvas.getContext('2d') // 使用中的圖 var img = $targetImg ? $targetImg.get(0) : document.getElementById("p_cxr_preview") ctx.drawImage(img, 0, 0, canvas.width, canvas.height) //起始點座標 let x1 = 0 let y1 = 0 // 終點座標 let x2 = 0 let y2 = 0 // 畫筆 ctx.strokeStyle = 'blue' ctx.lineWidth = 2 ctx.lineCap = 'round' ctx.lineJoin = 'round' // 宣告 isDrawing 為滑鼠點擊的狀態,因為我們需要滑鼠在 mousedown 的狀態時,才會監聽 mousemove 的狀態 let isDrawing = false // 透過上方的 hasTouchEvent 來決定要監聽的是 mouse 還是 touch 的事件 let upEvent = hasTouchEvent ? 'touchend' : 'mouseup' let outEvent = hasTouchEvent ? 'touchcancel' : 'mouseout' let downEvent = hasTouchEvent ? 'touchstart' : 'mousedown' let moveEvent = hasTouchEvent ? 'touchmove' : 'mousemove' canvas.addEventListener(upEvent, function(e){ isDrawing = false }) canvas.addEventListener(outEvent, function(e){ isDrawing = false }) canvas.addEventListener(downEvent, function(e){ isDrawing = true x1 = e.offsetX y1 = e.offsetY }) canvas.addEventListener(moveEvent, function(e){ if (!isDrawing) { return } // 取得終點座標 if (hasTouchEvent) { e.preventDefault(); var touch = e.touches[0] || e.changedTouches[0]; var elm = $(this).offset(); x2 = touch.pageX - elm.left; y2 = touch.pageY - elm.top; } else { x2 = e.offsetX y2 = e.offsetY } // 開始繪圖 ctx.beginPath() ctx.moveTo(x1, y1) ctx.lineTo(x2, y2) ctx.stroke() // 更新起始點座標 x1 = x2 y1 = y2 }) }; |
1 |
<link rel=stylesheet type="text/css" href="css/style.css"> |
1 |
<link rel="icon" href="demo_icon.png" type="image/png" /> |
Reference:
This is because of the phone number format and here is the solution:
1 |
<meta name="format-detection" content="telephone=no"> |
Reference:
In some situation, Safari will scale web page to show some special effect, e.g. Dropdown box (<select>).
Solution:
1 |
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1"> |
The key is “maximum-scale” property to stop Safari scaling web page.
Reference: