javascript - 在 HTML5、CSS3、JS 中单击按钮更改 View 端口

Question

我想在 HTML 5 Fluid Grids 中单击按钮更改网站 View ，例如，当我用手机单击按钮时，我的网站 View 更改为移动 View ，或者您可以说我的视口(viewport)更改为移动设备等当我单击选项卡 View 时，它会自行切换到选项卡 View 端口并开始显示选项卡站点。我的网站已经在流体网格系统中。意思是当我改变浏览器窗口的大小时它会改变，但我想通过单击按钮来获得这种效果。作为引用，请查看此链接。想实现类似于右边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。为每个功能添加按钮，您将希望将 Canvas 放置在您喜欢的位置...

<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)
        }

看看这个定位思路:someone named notme然后，您可以为“laptopResize”、“phoneResize”、“skinnyThingResize”等创建一个。