移动网站：iPhone上缺少水平滚动 [英] Mobile Site: Lack of horizontal scrolling on iPhone
问题描述
我最近创建了我的网站的移动版本。一般情况下工作正常，但我在移动设备上遇到一些问题，而不是在代码片段和YouTube视频嵌入时水平滚动。
I've recently created a mobile version of my website. Generally things work fine, however I'm having some issues with mobile devices not scrolling horizontally on code snippets and with YouTube video embeds.
-
我使用 SyntaxHighlighter 来突出显示网站上的代码，具体取决于网站上的代码示例。这对桌面浏览器非常有用，但是在移动设备上，代码无法水平滚动（切断大部分重要代码）。
I use SyntaxHighlighter to highlight the code on the site, as per the code examples on the site. This works great for desktop viewers, however on mobile the code cannot be scrolled through horizontally (cutting off large portions of important code).
我使用YouTube的iframe代码将视频嵌入到文章页面中，但是使视频从桌面到移动设备正确地向上和向下缩放以填充内容容器（或达到最大尺寸）是很困难的。
I use YouTube's iframe code to embed videos into article pages, however making the videos scale up and down correctly from desktop to mobile to fill the content container (or hit a maximum size) is proving difficult.
任何有关这些问题的帮助都将不胜感激。
Any help on either of these problems would be greatly appreciated.
推荐答案
- 对于Youtube视频，非常简单。在iframe中，为其添加以下css样式：
<style type="text/css">
iframe.someClass {
width:100%;
max-width:NNNpx;
}
</style>
其中NNN是您希望iframe拥有的最大宽度，通常是桌面版本的容器或甚至你想要的一些尺寸。
Where NNN is the max width you want the iframe to have, normally the container of the desktop version or even some size you want.
使用此代码，iframe的宽度将是它的容器的100％，除非容器大于最大宽度尺寸你设置好了。如果它更大，则会发生最大宽度。
With this code, the width of the iframe will be 100% of it's container, unless the container is bigger than the max-width size you've setup. If it's bigger, the max-width will take place.
这将涵盖大多数问题，并确保宽度始终是容器可以具有的最大宽度，当屏幕尺寸小于最大宽度值。
This will cover most of the problems and ensure the width is always the maximum the container can have, when screen size is smaller than the max-width value.
- 对于水平滚动问题：
iOS'Mobile Safari通常会使用overflow：auto扩展所有元素，因为它不允许以任何方式使用滚动条。这同样适用于例如框架组。你不能有一个固定的部分和一个滚动的部分，因为MSafari拉伸两者，所以每个元素的所有元素都是可见的。
因为你的容器有溢出：隐藏，由于这个CSS属性，片段被拉伸但隐藏。
Since your container have overflow:hidden, the snippet is stretched but hidden due this CSS property.
实际模拟滚动条的唯一方法是使用一些javascript框架。最好的一个是Cubiq的iScroll 4（ http://cubiq.org/iscroll-4 ），它们都有支持多个触摸事件和其他不错的选项。
The only way to actually simulate scrollbars is by using some javascript framework. The best one is Cubiq's iScroll 4 ( http://cubiq.org/iscroll-4 ) that have support to multiple touch events and other nice options.
这样，您可以使代码片段接受触摸事件，然后水平，垂直或同时滚动。
This way, you can make the code snippets to accept touch events and then be scrolled horizontal, vertically or both.
最常见的用法是：
<script charset="utf-8" type="text/javascript">
var myScroll = new iScroll('idOfWrapper', {
//various options
});
</script>
由于你有很多片段（使用你给出的例子），你可以应用某种循环对于他们每个人，使用jQuery.each（）。
Since you got lots of snippets (using the example you gave), you could apply some kind of loop for each of them, using a jQuery.each().
让我们举个例子。
使用jQuery和iScroll，您可以进行以下操作：
Let's make an example. Using jQuery and iScroll, you could make the following:
HTML：
<html><head>
<title>Test</title>
<!-- include jquery and iscroll -->
</head><body>
<div id="divPretendingIsDeviceScreen" style="max-width:320px;overflow:hidden;">
<h1>Header</h1>
Lorem ipsum dolor sit amet.
<br/><br/>
<h2>Another header</h2>
For example:<br/>
<br/>
<div class="divToBeScrolled">
<pre>
//This is a single-line comment
//one bigger line to test one bigger line to test one bigger line to test one bigger line to test
</pre>
</div>
<h2>Our first C++ program</h2>
<div class="divToBeScrolled">
<pre>
/*
This is a multi-line comment.
It can have multiple lines!
*/
//one bigger line to test one bigger line to test one bigger line to test one bigger line to test
/*making
vertical
scroll
//one bigger line to test one bigger line to test one bigger line to test one bigger line to test
making
vertical
scroll
//one bigger line to test one bigger line to test one bigger line to test one bigger line to test
making
vertical
scroll
//one bigger line to test one bigger line to test one bigger line to test one bigger line to test
*/
</pre>
</div>
<br/>
<br/>
Lorem ipsum dolor sit amet.
</div>
</body></html>
CSS：
<style type="text/css">
.scrollerType {
overflow:hidden;
max-height:200px;
/* put max height you want the scroller div to have,
normally less than the device's window size, like 200px or so so.*/
}
div.divToBeScrolled {
overflow:scroll;
display:inline-block;
white-space:pre-wrap;
}
</style>
JS / jQUERY：
JS/jQUERY:
<script charset="utf-8" type="text/javascript">
var snippetName = new Array(); //creates a new array to make the var names for iscroll
var selfId = new Array(); //creates a new array to make the names for the scrollers
$('.syntaxhighlighter').each(function(index) { //for each '.syntaxhighlighter' and 'index' as counter
selfId[index] = 'scrollerId'+index; //creating a new id name for the container
$(this).wrap('<div id='+selfId[index]+' class="scrollerType" />'); //wrapping each '.syntaxhighlighter' with the container
var timeout = setTimeout(function(){ //yes, timeout. This to support Android mostly
snippetName[index] = new iScroll(selfId[index], { //initializing multiple iscroll's each with an index and targeting the selfId
//here you declare various options - see "Passing parameters to the iScroll" at iScroll page
//this is the best set, i think
snap: false,
momentum: true,
hScrollbar: false,
vScrollbar: false,
hScroll: true,
vScroll: true,
desktopCompatibility:true
}); //end new iScroll
},100); //100ms just bc 0ms or 1ms might not be enough
}); //end .each
</script>
由于我们需要iscrolls才能在片段荧光笔发生后生效，我们可以将上面的内容包起来在js函数中编写代码，并在完成颜色时将其作为回调函数添加到代码段荧光笔中。
Since we need the iscrolls to take effect after the snippet highlighter has taken place, we can wrap the above code in a js function and add it as callback function at the snippet highlighter when it is done with the colors.
我认为这样可行。现在做，但想法是对的。
将在今晚进行测试并根据需要通过编辑答案进行修复。
I think this will works. Made it now but the idea is right. Will test tonight and make the fixes if needed by editing the answer.
嗯，我认为就是这样，随便问你是否理解一件事。
Well, i think that's it, feel free to ask if you don't understood a thing.
_ *编辑：* _
修复了JS代码，添加了CSS代码和测试用例HTML。
Fixed the JS code, added the codes for CSS and an the test-case HTML.
我做了一个测试用例
（ http://portableideas.net/myRepo/trunk/stackoverflow/www/questions_7869572.html ）
这篇关于移动网站：iPhone上缺少水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
