我创建了一些响应式网站,但对响应式网站开发来说却是新手.在我的CSS中,99%的值都是ems或百分比.我正在使用媒体查询(max-width和max-device-width)来进行布局更改.我没有包含一个视口元标记,它在iOS,我测试的许多Android手机和平板电脑以及所有桌面浏览器上运行良好.
添加元标记会破坏我的网站.我做错了什么,或者做了些什么事情以便我不需要包含它？我很困惑为什么它似乎是一种最佳实践,因为它打破了我的东西.
我错过了什么吗？
我确定之前已经解决了1000次:我得到了一个960*560大小的画布和一个大小为5000*3000的房间,其中应该只画出960*560,这取决于玩家的位置.玩家应该始终位于中间,但是当接近边界时 - 应该计算最佳视图).玩家可以使用WASD或箭头键完全免费移动.并且所有物体都应该自己移动 - 而不是我移动除了玩家之外的所有其他东西以创造玩家移动的幻觉.
我现在发现了这两个问题:
HTML5 - 为画布创建一个视口,但仅适用于此类游戏,我无法重现我的代码.
更改html5画布的视图"中心"似乎更有前途,也更有说服力,但我只是理解它相对于播放器正确绘制所有其他对象而不是如何相对于播放器滚动画布视口,我想要当然要先实现.
我的代码(简化 - 游戏逻辑是单独的):
var canvas = document.getElementById("game");
canvas.tabIndex = 0;
canvas.focus();
var cc = canvas.getContext("2d");
// Define viewports for scrolling inside the canvas
/* Viewport x position */ view_xview = 0;
/* Viewport y position */ view_yview = 0;
/* Viewport width */ view_wview = 960;
/* Viewport height */ view_hview = 560;
/* Sector width */ room_width = 5000;
/* Sector height */ room_height = 3000;
canvas.width …我希望我的网页全屏显示并禁用所有移动设备上的缩放.
使用元标记:
<meta name="viewport" content="width=1165, user-scalable=no">
我能够为iPhone/iPad做到这一点,但在Android设备上,网站的放大率约为125%.
如果我使用标签
<meta name="viewport" content="width=max-device-width, user-scalable=no">
我得到相反的结果.那么它适用于Android,但它不适用于iPad/iPhone.
我正在构建一个自适应/响应式网站.
关于最近对HTML5BP的更改:
" 移动/ iOS css修订版 "
我开始使用:
<meta name="viewport" content="width=device-width">
...我在我的CSS中有这个:
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
当initial-scale=1被包括在内,从垂直旋转到水平(在iPad/iPhone)引起的布局从2列(例如)更改为3列(由于美达查询,initial-scale=1和JS修复为视口比例错误).
总而言之,在横向模式下,这会缩放页面:
<meta name="viewport" content="width=device-width">
......而这不是:
<meta name="viewport" content="width=device-width, initial-scale=1">
注意:在iPad/iPhone上查看HTML5BP网站时,您可以看到此缩放效果.
我的问题:
@robertc:谢谢!这非常有帮助.
其实我喜欢不具有initial-scale=1; 我的同事习惯于看到布局变化而不是缩放.我敢肯定,我将被迫增加initial-scale=1只是为了取悦所有人(因为没有放大,看到布局的变化,是他们已经习惯了看到的).
我刚刚注意到github上的HTML5BP index.html和网站正在使用<meta name="viewport" content="width=device-width">; 对我来说,这是放弃的理由initial-scale=1,但当我试图向"非极客" 解释这些事情时,我会引起一阵兴奋.:d
当我在iphone中加载我的网站时,它不会缩小.我看到的只是左上角最几百平方像素.我是移动优化的新手,但我觉得大多数页面会自动滚动以适应,大多数问题似乎都是针对我所遇到的相反情况(强制手机不能缩小).
我希望整个页面宽度可见,并使用户必须放大才能阅读文本.
我已尝试使用和不使用以下代码,但没有明显的效果.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- I Also tried: -->
<meta name="viewport" content="width=1024, initial-scale=1">
我正在试图弄清楚如何利用移动视口元标记自动缩放HTML页面的内容以适应Web视图.
约束:
例如,如果我有一个图像(640x100px),我希望在webview为300x250(缩小到适合)时缩小图像.另一方面,如果webview是1280x200,我希望图像放大并填充webview(放大到适合).
在视口上阅读android文档和iOS文档之后,看起来很简单:因为我知道我的内容的宽度(640)我只是将视口宽度设置为640并让webview决定是否需要向上或向下缩放内容适合webview.
如果我将以下内容放入我的Android/iPhone浏览器或320x50 webview中,则图像不会缩小以适应宽度.我可以向右和向左滚动图像..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Viewport</title>
<meta name="viewport" content="width=640" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
vertical-align: top;
}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td
{
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
line-height: 1;
font-family: inherit;
vertical-align: top;
}
</style>
</head>
<body>
<img src="http://www.dmacktyres.com/img/head_car_tyres.jpg">
</body>
</html>
我在这做错了什么？视口元标记是否仅放大<webview区域的内容？
我在我的网页上使用此代码
<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
我认为初始比例将确保网页缩小,但事实并非如此.有任何想法吗？
我试过这个:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
但是,我需要将宽度设置为1000px,否则看起来不正确.
<meta name="viewport" content="width=1000; user-scalable=0;" />
当jquery.localscroll到达文档的某个点(div)时,我想触发一个事件.
让我们说我们从顶部div垂直滚动到第三个.当它到达那里时,动作就会触发.
iPhone/iPad等移动设备的可视视口和布局视口之间的区别是什么？
我已经浏览了很多在线资源,但我仍然不清楚它.
我有三个div元素:一个作为标题,一个作为页脚,以及一个中心内容div.
将div在中心需要与内容自动扩展,但我想一个min-height,使得底部div总是至少到达窗口的底部,但在较长的网页是不是固定在那里.
例如:
<div id="a" style="height: 200px;">
<p>This div should always remain at the top of the page content and should scroll with it.</p>
</div>
<div id="b">
<p>This is the div in question. On longer pages, this div needs to behave normally (i.e. expand to fit the content and scroll with the entire page). On shorter pages, this div needs to expand beyond its content to a height such that …