Light box is not fully shown in ipad/iphone [#1053592]

Comment #1

dddave CreditAttribution: dddave commented 7 February 2011 at 12:44

Project:	Drupal core	» Lightbox2
Version:	6.20	» 6.x-1.x-dev
Component:	other	» Miscellaneous

This isn't a core issue.

Log in or register to post comments

Comment #2

mugunthan CreditAttribution: mugunthan commented 7 February 2011 at 13:14

is it because of Ipad settings?

Log in or register to post comments

Comment #3

patrickroma CreditAttribution: patrickroma commented 20 February 2011 at 15:29

subscribe

Log in or register to post comments

Comment #4

Wan CreditAttribution: Wan commented 13 March 2011 at 11:14

subscribe

Log in or register to post comments

Comment #5

Wan CreditAttribution: Wan commented 30 March 2011 at 13:33

Status:	Active	» Closed (works as designed)
Issue tags:	-Needs documentation

I found a solution to this issue... you simply feed the iPad the width of your website in a meta tag (meta name="viewport") and then when the screen size is calculated by Lightbox2 the correct width is returned from the iPad. Other browsers ignore this tag.

Add the following two lines to yourthemename_theme_preprocess_page() function in template.php

	drupal_set_html_head('<meta name="viewport" content="width=1000" />');
	$vars['head'] .= drupal_get_html_head();

Substitute '1000' for the width of your webpage.

I discovered this using the following two pages:
http://x7.fi/2010/02/12/how-to-fit-your-website-for-the-apple-ipad/
http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_se...

ps I'm not too sure what to set the status to... eel free to change to something more appropriate.

Log in or register to post comments

Comment #6

dddave CreditAttribution: dddave commented 30 March 2011 at 08:07

Title:	Light box is not fully shown in ipad	» Light box is not fully shown in ipad/iphone
Issue tags:		+Needs documentation, +meta, +iphone, +ipad, +viewport

If someone else can confirm this solution without the occurrence of other problems this can be set to fixed.

This might need documentation though.

Log in or register to post comments

Comment #7

Wan CreditAttribution: Wan commented 30 March 2011 at 09:02

Confirmed fixed for iphone too.

Log in or register to post comments

Comment #9

woop_light CreditAttribution: woop_light commented 21 July 2012 at 06:23

In Drupal 7, is there anything wrong with simply adding it to the of your html.tpl.php template file for your theme?

I hijacked the "Framework" theme, and it does just that. Copied directly from the html.tpl.php template for "Framework":

<head>
  <?php print $head; ?>
  <!-- Set the viewport width to device width for mobile -->
  <meta name="viewport" content="width=device-width" />
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <?php print $scripts; ?>
  <!-- IE Fix for HTML5 Tags -->
  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

Rather than content="width=device-width" I'm going to play around with different widths to see what works best. I'm just beginning to mess around with this, so please feel free to chime in.