Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Display problem on Iphone WordPress

  • SOLVED

Hello,

One of my page is display strangly on Iphone (tested on Iphone5).
The logo and element of the page are mixed up.

Here is the page that is king of zoomed in Iphone :
http://www.p-a-f.be/contact/

And here is another page of the website for comparaison :
http://www.p-a-f.be/project/

Please see the two screenshot showing the problem on Iphone.
If you have any clue how to debugg this, I would be pleased.
Guillaume

Answers (1)

2014-11-19

zebra webdesigns answers:

For the contact page,

viewport is set as
<meta name="viewport" content="width=device-width, initial-scale=1">

where as for the project page viewport is not set so the page is not scaled to iphone and ipad.
where as the contact page has the width set as device-width, it adjusts the width according to device.

you can check the code by view page source.


guillaume guillaume comments:

OK, so I should delete this line from the code for the contact page ?:

<meta name="viewport" content="width=device-width, initial-scale=1">


zebra webdesigns comments:

exactly, if you know where you put that code.

if you need help ping me in skype: bhuvan530531


guillaume guillaume comments:

Ok, I going to chack now, keep you posted If I need more help.


guillaume guillaume comments:

This is what I have on the header of the "page-contact.php" :

$headers = "From: " . strip_tags(esc_attr($_POST['q10'])) . "\r\n";
$headers .= "Reply-To: ". strip_tags(esc_attr($_POST['q10'])) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";


guillaume guillaume comments:

Found the code ont page "header.php", I deleted it. But is this page not suppose to be common to all pages ?


zebra webdesigns comments:

I thought so , It cannot be from page contact.
it should be supplied dynamically.
can you pack the theme and send it to me.
or is this a plugin you have used.


zebra webdesigns comments:

can you give the code as it is whats in the header.php.

you can use pastebin.com and share the link here.


guillaume guillaume comments:

It work, thanks for your help.
Great I can move on.
Have a good day !


guillaume guillaume comments:

Here is the code for "header.php"
http://pastebin.com/79EEGKmN

I deleted the following line :
<meta name="viewport" content="width=device-width, initial-scale=1">

Do you think it is Ok to delete it for the inline version of the website ?


zebra webdesigns comments:

following is the code which they used to set the viewport only for contact page.

if(is_page('contact'))
{ ?>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php } ?>


so yes it wont affect other pages.


guillaume guillaume comments:

So I should delete the whole code :

if(is_page('contact'))
{ ?>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php } ?>


?


guillaume guillaume comments:

This code sorry :

<?php
if(is_page('contact'))
{ ?>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php } ?>


zebra webdesigns comments:

no need. seems they have set the edge mode for IE.
so deleting only the viewport line is enough and no it works fine in my mobile.
attached the screenshot.