Es fundamental comprender el código de forma correcta antes de usarlo a tu trabajo si tquieres aportar algo puedes comentarlo.
Solución:
La solución para este problema es bastante simple y hay dos formas de hacerlo. Si tienes control sobre el Contenido.html entonces simplemente cambia el div#ScrolledArea ancho CSS a:
width: 1px;
min-width: 100%;
*width: 100%;
Básicamente, la idea aquí es simple, establece el width a algo que es más pequeño que la ventana gráfica (ancho de iframe en este caso) y luego sobrescribirlo con min-width: 100% para permitir width: 100% que iOS Safari sobrescribe por defecto. los *width: 100%; está allí, por lo que el código seguirá siendo compatible con IE6, pero si no le interesa IE6, puede omitirlo. Manifestación
Como puedes ver ahora, el div#ScrolledArea el ancho es en realidad 100% y el overflow: scroll; puede hacer su cosa y ocultar el contenido desbordante. Si tiene acceso al contenido del iframe, entonces esto es preferible.
Sin embargo, si no tiene acceso al contenido del iframe (por el motivo que sea), puede usar la misma técnica en el propio iframe. Simplemente use el mismo CSS en el iframe:
iframe
width: 1px;
min-width: 100%;
*width: 100%;
Sin embargo, hay una limitación con esto, debe desactivar las barras de desplazamiento con scrolling="no" en el iframe para que esto funcione:
Si las barras de desplazamiento están permitidas, esto ya no funcionará en el iframe. Dicho esto, si modificas el Contenido.html en su lugar, puede conservar el desplazamiento en el iframe. Manifestación
El problema, al parecer, es que Mobile Safari se negará a obedecer el ancho de su iFrame si el documento que contiene es más ancho que lo que ha especificado. Ejemplo:
http://jsbin.com/hapituto/1
En un navegador de escritorio, verá un iFrame y un Div ambos configurados en 300px. El contenido es más amplio para que pueda desplazarse por el iFrame.
En Safari móvil, sin embargo, notará que el iFrame se expande automáticamente al ancho del contenido.
Mi conjetura es que esta es una solución para problemas de larga data con el contenido de desplazamiento dentro de una página. En el pasado, si tenía un iframe de desplazamiento grande en un dispositivo táctil, se quedaba ‘atascado’ en el iframe, ya que se estaría desplazando en lugar de la página misma. Parece que Apple ha decidido que el comportamiento predeterminado de un iFrame es ‘sin desplazamiento’ y se expande para evitarlo.
Una opción puede ser esta solución. En lugar de asumir que el iFrame se desplazará, coloque el iframe en un DIV sobre el que tenga control y deje que se desplace.
ejemplo: http://jsbin.com/zakedaja/1
Ejemplo de marcado:
En Safari móvil, ahora puede desplazarse por el contenido del iFrame ahora completamente expandido a través del div que lo contiene.
El problema: esto se ve muy feo en un navegador de escritorio, ya que ahora tiene barras de desplazamiento dobles. Por lo tanto, es posible que deba realizar una detección del navegador con JS para evitar esto.
Necesitaba una solución de navegador cruzado. Los requisitos eran:
- necesario para trabajar tanto en iOS como en otros lugares
- no tiene acceso al contenido del iFrame
- lo necesito para desplazarse!
Basándome en lo que aprendí de @Idra con respecto al desplazamiento = “no” en iOS y esta publicación sobre cómo ajustar el contenido de iFrame a la pantalla en iOS, esto es lo que terminé. Espero que ayude a alguien =)
HTML
CSS
html, body
height: 100%;
#url-wrapper
margin-top: 51px;
height: 100%;
#url-wrapper iframe
height: 100%;
width: 100%;
#url-wrapper.ios
overflow-y: auto;
-webkit-overflow-scrolling:touch !important;
height: 100%;
#url-wrapper.ios iframe
height: 100%;
min-width: 100%;
width: 100px;
*width: 100%;
JS
function create_iframe(url)iPad)/))
wrapper.addClass('ios');
var scrolling = 'no';
else
var scrolling = 'yes';
jQuery('