CODEWITHSUNDEEP
wordpressmobilemobile-safari
Jon Mitten
Jon Mitten

Reputation: 2055

Wordpress theme mangled on Mobile Safari

I am trying to translate a site theme so it looks similar on a mobile device. The only devices I have to test on right now are iOS devices: an iPhone and a Gen 3 iPod Touch. The iPhone is higher resolution (Retina).

When I visit a site I'm working on ( http://diynamic.net/dev/jetcityairtours ), the theme renders the page width across only half the iDevice's total screen width, but with some elements floating out the way they do on the Chrome browser on PC. The whole site would be great if I could get the background div and the menus to render full width on the page - it'd be perfect!

I have the wordpress mobile

My questions are: Why is the theme getting mangled? Is there a "view-source" option for iOS Safari? Is there another trouble-shooting solution for developing themes for iOS in particular, mobile in general? and: Do other people see this same effect on non-iOS devices (maybe not the right place to ask this last question).

I have a horribly ugly mobile theme in place via Wordpress Mobile Pack - just default. If you're interested in testing on mobile, please go to the non-mobile theme, link at the bottom.

I am aware of screen emulator plug-ins in Chrome and Firefox, but I am not aware of user-agent spoofing / emulating on a desktop platform.

I'm not sure if I should be posting only one question per "Question", so apologies if this is not appropriately segregated.

Upvotes: 0

Views: 559

Answers (1)

mastazi
mastazi

Reputation: 1672

What you need is to use a viewport meta tag (see below for reference). More specifically, in your case, it sounds like you could solve your problem by including something like this in your head section:

<head>
...
<meta name = "viewport" content = "maximum-scale = 1.0">
...
</head>

The viewport meta tags, while created by Apple, also work with Android browsers. For reference: General explanation, info & examples here

Upvotes: 2

Related Questions