Изменение порта просмотра по нажатию кнопки в HTML5, CSS3, JS

Question

Я хочу изменить вид сайта одним нажатием кнопки в HTML 5 Fluid Grids, например, когда я нажимаю кнопку на мобильном телефоне, мой вид сайта меняется на Мобильный вид, или вы можете сказать, что мой порт просмотра меняется на мобильный и аналогично, когда я нажимаю на вкладке просмотра он переключается на порт просмотра вкладки и начинает показывать вкладку сайта. Мой сайт уже находится в системе жидкостной сетки. Значит, когда я изменяю размер окон браузера, он меняется, но я хочу получить этот эффект нажатием кнопки. Для справки взгляните на эту ссылку. Хотите добиться функциональности, аналогичной 4 кнопкам справа от нее. http://themeforest.net/item/diverso-bootstrap-responsive-sliding-pages/full_screen_preview/4919410

Answer 1

<button onclick="tvResize();"><img src="tv.gif"></button>
<canvas id=c></canvas>  

... Два приведенных выше являются критическим HTML. Добавьте кнопки для каждой функции, и вы захотите расположить холст там, где вам нужно...

<script type="text/javascript">
    var v = yourVideo
    var canvas = document.getElementById('c');
    var context = base.getContext('2d');
    var w, h;

    function tvResize() {
        w = "400px" 
        h = "100px"
        canvas.width = w
        canvas.height = h
        }

    context.clearRect(0, 0, w, h)

    function draw() {
    context.drawImage(v, 0, 0, w, h)
        }

взгляните на это для идей позиционирования: кто-то по имени notme Затем вы можете создать его для "laptopResize", "phoneResize", "skinnyThingResize" и т. д.