Customizing Tumblr's Mobile Theme
I was hoping to make my Tumblr blog more mobile friendly and I would like to use a mobile theme alongside my desktop theme. I see that I can use the default mobile theme for mobile devices, but is there a way for me to customize the mobile theme, but still keep my regular theme for desktops?
Answer
Just answering for people who find this while searching. I do not want them to be mislead by the comments on the question. Not happy about it.
Until now, it is possible to have separate theme for mobile devices. You have to put the codes for that in a new Custom page with url "/iphone-theme" as @Ally also mentioned.
And yes it works for all mobile devices (not just iPhones), to be more specific for phones, even for a lot of big tablets Tumblr switches the layout to your base theme (here I am talking based on my tests a while ago; less than few months. You should test yourself, always.), which I think is good.
The mobile theme has most features like the base theme, it also responds to the meta tags (like meta-if, meta-colors, etc. That also means you can use "Global Appearance" options) in the base theme. So for example you change the option titled "Color" in your "theme customization page", which should look something like;
<meta name="color:Color" content="#FFA500"/> in your base theme's HTML.
Then you will also affect the color in the mobile theme if the colors there are also set to something like; body { color: {color:Color}} or body { background-color: {color:Color}}. Even if the same meta tag is not present in the mobile theme.
Please note that you can not create options in the "theme customization page" with meta tags only in the mobile theme's HTML.
I use it. Why I use it;
I have high resolution images (for "Photo" posts) on the desktop version, and JavaScript image slider for them, and some time, some browsers in mobiles devices crash for that reason (at least for my audience). Using {PhotoURL-500} instead of {PhotoURL-HighRes} solves the issue, and saves bandwidth. There is no way you can do that with CSS @media.
To everyone (except @Ally); do some research before replying, it's not even a new thing.
Also do not believe everything you see on the internet (at least without trusted sources).
Update:
The mobile theme overrides the "default mobile theme" so you will not have to disable the option "Use default mobile theme" in "Advanced options" to see the mobile theme on mobile devices. If you disable the option, you will see your base theme.