I have made a wordpress theme of a site. I used Starker Theme for the wordpress theme development. Now I want to make my site Mobile Friendly. Is there any solution to make few changes or using some plugins for this purpose? I have tried wptouch, WordPress Mobile Pack and MobilePress but they are not working. I have checked my output on the http://mobiletest.me, but this is not displaying the accurate mobile Output (Output is same as on my PC Browser). Either there is problem in this testing site or plugin? All this make me confused.
Please let me know any other solution?
Thanks in advance.
You may not be checking your site properly. Make sure you have this line of code in your html head tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Without that line of code, your device will display the page the same as the browser.
I'm the developer of MobileTest.me, just want to clarify a few things.
As you have correctly noticed, mobiletest.me uses your PC browser's engine to render the website you want to test. This is by design as it was created as a tool to test responsive web design. The mobile devices are provided as an indicator of common smartphone resolutions.
If what you want is to send a different theme to desktop browsers and a different one to mobile devices then you probably need a wordpress plugin such as mobile detector. The problem with this approach is that if the plugin fails to determine the device browser correctly, it will probably send the PC version to a mobile device.
The other approach is responsive design which sends different CSS based on the resolution of a device and does not rely on browser detection. If you decide to go the responsive way you may find this post useful where you can check some examples of how mobiletest.me can be used to check responsive web designs (images are clickable).
Related
I'm looking for a way to disable the mobile view when viewing on my iPhone for my website. Is there a plug in or some code that can do this?
My theme is starkers-master and there's no option with this to do so
If your theme provides mobile detection and a mobile layout which you do not want, first make sure there isn't a theme option to disable it. If there is not, you should be able to remove the mobile detection code by commenting it out and that should do the trick.
The best way to handle mobile theme use is to detect the device and default to the appropriate layout but also provide a user override so they can opt-in to the full site from their phone (or even the mobile site from their desktop). This is done by storing a cookie on the device with the user's choice and using that to override the mobile detection result.
Hmmm. A quick glance at the starkers source makes me think it is not really a mobile component but just a responsive theme. It looks like there is an easy fix though...
Edit parts/shared/html-header.php and remove line 11. It is easy to find because it has a comment that identifies it:
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Remove if you're not building a responsive site. (But then why would you do such a thing?) -->
It looks like that would remove the responsive behavior of the theme (assuming the comment is correct).
If you are self hosting Wordpress and have Jetpack installed, you may have to disable the mobile theme view by going to:
Jetpack > Settings
Go to the 'Writing' tab and look for 'Optimize your site for smartphones' and disable it there.
This seems to be equivalent to the Settings > Appearance > Mobile Theme switch on wordpress.com.
I think it's better to use a different theme for mobile devices instead of disabling it. In this case there are plenty of plugins in WordPress directory and I personally use and recommend WPtouch because it automatically transforms your WordPress website for mobile devices, complete with ajax loading articles and smooth effects when viewed from popular mobile web browsing devices. If you want to see a preview of WPtouch then you can visit http://heera.it with a mobile phone.
Alternatively, you can use following code (using mobile_device_detect.php script)
include('mobile_device_detect.php');
$mobile = mobile_device_detect();
if ($mobile==true) {
// do something here, maybe redirect to a page with a message
}
To achieve this, at first you have to get the code from detectmobilebrowsers.mobi and upload it to your theme directory. Once you done, simply open your header.php file and place the code at the top of the file.
Also take a look at this.
Update:
In the accepted answer author mentioned A quick glance at the starkers source makes me think it is not really a mobile component but just a responsive theme. and I've realized that it was a responsive theme but OP didn't mention anything about it in the question and I misunderstood the question and answered. So, as a future reference I didn't delete the answer, keeping on mind that, it could be helpful to others.
This answer could be helpful to those who want to use a different theme for mobile devices.
I was able to disable mobile view on my wordpress site by simply Going to Appearance > Theme Editor. Then From the Theme Files on the right-side of the screen select header.php
Locate and comment out the line <meta name="viewport" content="width=device-width, initial-scale=1">
Just like so <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
Save your changes and that's all
I believe this method should work well with any theme. In my case I'm using Astra theme
I would like to ask how to force desktop behaviour in wordpress with mobile phones?
I have tried some plugins (http://wordpress.org/extend/plugins/wordpress-mobile-pack/, http://wordpress.org/extend/plugins/mobile-smart/, etc.) with no success.
I switched to desktop mode user agent on my phone with no success.
Wordpress site still shows in some mobile mode. Layout is different and some elements are even missing.
Any ideas? Thank you.
See, it all depends upon two things, first the theme you choose and then on mobile browser.
Let's discuss theme first, if its responsive theme, then it surely will change the layout of site and even might miss some div blocks.
And now a days most of the themes are responsive, they automatically adjust to mobile browser, even wordpress default theme twenty eleven and twelve are responsive.
Secondly, most of high end mobile browser are made to change the look of site, just to facilitate users and irritate developers (lol)
Well, i would suggest, please check it this theme responsive, if yes, make it static.
I just figured out how to do this. I found out accidentally that when you setup domain forwarding (and use masking) in GoDaddy, it will always show the desktop version of the site when you visit the domain on a phone. Now, you don't want to buy a different domain for every website you want to be "non-mobile". So, simply setup a sub-domain and forward it to your website (using masking). When you visit that subdomain on a phone, it will show the full desktop version. Hope this helps you as much as it helped me :)
I'm running a very simple, brochure website on Wordpress and my client needs a mobile website.
I want to redirect mobile visitors from the desktop website to the mobile website. I do not have the technical knowlegde to re-design and re-develop my CMS, so I am planning on making a new subdirectory with mobile-optimized HTML pages and working from there.
Any thoughts on how to make a device-sensitive redirect?
Have you considered Media Queries ?
In that case you just editing the existing CSS file and don't need to bother with subfolders, mobile detection, redirects etc.
From a simple web search, I turned up this result: http://css-tricks.com/snippets/javascript/redirect-mobile-devices/ for a JavaScript implementation. It sets document.location to a different url if the width of the screen is less than 699.
I use this PHP statement to check for mobile browsers. I doubt I have all browsers in this function, but it is a start. You seem to have the know-how to make the basic theme, so this might be the route you're looking to take.
if (preg_match("/(mobile|webos|opera mini)/i", $_SERVER['HTTP_USER_AGENT'])) {
// Load mobile skin
} else {
// Load desktop skin
}
I am using mobileesp for php site and it works just right, it appears there is also now javascript available to do the same. Apparently the site has samples.
Hope this helps:
http://blog.mobileesp.com/?cat=8
i am creating a mobile site, now my problem is the images are getting render when i run the site on PC, and also while running the site on IPhone, but when it comes to Opera Browser for any symbian based mobile, the images are not at all rendering..
i am using asp:Image control on the site.. is this causing it not to be displayed on mobile.
if yes, then whats the equivalent for the mobile control. and also i want to resize the image as per the aspect ratio almost all the images are big in dimension.
Please anyone have any idea for the same, i will appreciate it.
If you wish to have your pages and images resize automatically based on the size of the device on which they are being viewed, you might find an answer with Zurb Foundation. I use it in almost all of my web "responsive web design" projects now.
http://foundation.zurb.com/
Hey i have made both the desktop version and the mobile version of a website.so now when a visitor visit my website then how do i came to know that this visitor to my website using a mobile phone or PC?
To be more clear,when a visitor visit through mobile then it should redirect the visitor to the mobile version of my website and if through desktop then redirect to the desktop version of website?
How can I do that?I am using HTML5 and CSS for ma website?
Any help is appreciated?
UPDATE--> What if i want to get the answer through the USER AGENT?
You can use javascript navigator object to retrieve user-agent string. (Only problem with this approach is you will have to keep updating list of mobile device useragents every time a new device is invented.) Following question discusses detection of mobile browser using user-agents. Auto detect mobile browser (via user-agent?)
This page contains some tricks involving the size of the screen and User Agent matches that could be used.
#Geetanjali; you have define device-width & meta tag in your html like this:
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" media"screen and (max-device-width: 400px)" href="mobile.css">
<link rel="stylesheet" media"screen" href="main.css">
So, when user open your website in mobile then it's call mobile.css & it's overwrite main.css the properties for for your mobile website.
read these article for more http://x7.fi/2010/02/12/how-to-fit-your-website-for-the-apple-ipad/ , http://webdesignerwall.com/tutorials/css3-media-queries
There are 3 main approaches you can take:
Subdomain (m.domain.com is standard). Separate views optimized for the mobile devices you support. Best to always provide a
link from the mobile site to the "full" site. You can also cookie
folks for their preference.
Device Detection This can range from heavy duty like
WURFL to something simpler that
does device detection (usually on user agent strings). Again provide the user with a link to the "full" site and cookie preferences.
Responsive Design Use a fluid grid and media
queries to create a
Responsive
Design
that provides a good experience for all clients.
Of the 3 approaches, I think Responsive Design makes the most sense these days unless you need to support feature phones, then a combination of m.domain.com and Responsive Design.