我希望对此有一个相对简单的修正。 我为一个客户创建了一个简单的网站, 它在所有浏览器中都显示如预期的那样。 为该项目开发一个单独的移动网站不是工作范围的一部分, 但我希望网站能在现代移动浏览器上正确显示。 目前, 在 iPhone 4 上, 整个1000px 容器的左侧被剪切( 可能是10px ), 我还可以继续滚动到左侧看它。 我想知道这是 CSS 问题还是某种缩放问题? 该网站可以访问 < a href=> http://jessehindle.com/ wordpress" rel=“ nofollow” >here 。
我很难找到任何与这个问题有关的资源, 但确实找到了这个片段:
<meta name="viewport" content="width=device-width; initial-scale=0.9;">
如果网站装满了75%的默认缩放,我会很高兴,但我没有移动设备的经验编码。
因此,就我的具体情况而言,我找到了一个行之有效的解决办法。 但愿这对类似局势中的其他人会有帮助。
事实上,关键在视觉运动元图中。 我在一个网页上工作,其内容限制在1000pxxxx600px集装箱中央。 THIS 文章对了解这一点很有帮助。
正如文章所说,“默认情况下,iPhone上的Safari将把您的页面变成一个大屏幕上的桌面浏览器,980个像素宽度可供网络内容使用。然后,它将缩小内容,使之适合小屏幕。”
In my case, with a 1000px fixed width, I was left with 20px cropped off the left, and an inability to pan over to it. The trick is to set a custom width (and height if necessary). Be sure to check the site in both vertical and horizontal iPhone orientations. There are other parameters you can use with this meta-tag, but I ve kept it simple.
这是我在网站
<meta name="viewport" content="width=1050px, height=650px" />
这给了我一个围绕网站内容的25px白边框, 并且仍然允许放大等等。 这不是一个iPhone特定网站的替代品, 但它能确保用户能够访问网站的所有内容。
希望这有帮助!
尝试删除初始比例尺 。
<meta name="viewport" content="width=device-width;">
如果您想要为移动视图更改一些 CSS, 将会为此使用一个名为 < a href=" http://adapt.960. gs/" rel=“ nofollow” >adapt.js 的工具。 它会选择与屏幕分辨率相关的样式表 。
I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....
I have a button that opens a dialog when clicked. The dialog displays a div that was hidden After I close the dialog by clicking the X icon, the dialog can t be opened again.
selectBox.selectCSS { background: url(/Images/replacementSelectBackground.png) top left no-repeat height:auto; } I have an issue in Safari only where the image is not rendering on top ...
How do you target specifically safari in css with styles?
Ive used the following css code to align my form elements: form { position:relative; } form input { position:absolute; left:11em; } However, the textarea element is not aligned correctly with the ...
So I ve got a menu with a hover/selected state and it loads fine in IE6/IE7. However when I scroll down the page and put the element outside of the viewport and then back in I get a broken image! I ...
I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...
I have defined my page footer in the css file as: #footer { position: absolute; height: 50px; text-align: center; background: #66CCCC; bottom: 0px; left: 0px; width: 100%; height: ...