Disabling mobile view for wordpress theme - wordpress

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

Related

Force Desktop View on All devices Wordpress

I would like to force Desktop view on all devices and just skip mobile and tablet styles entirely. This is because the desktop version just looks really good and the mobile version are not for my website. Also mobile view breaks a lot of stuff. Looking online this question has been asked many times but oddly, never answered. Is there a way to do this for a general template?
In header.php in appearance -> edit theme in Wordpress 5.6, you can find the line:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and delete it. This does not work in all themes, but for many it does work.

adding a "switch to desktop site" button in responsive theme..on wordpress website

how do i go about doing it?
there is one solution that i thought would work..
my theme allows me to turn of responsive design..
i copied the whole theme folder and renamed it to theme-mobile..
so now i have 2 exact same themes but with different names..i go in theme settings and turn of responsive design on one of the themes..
then i tried to use this plugin to switch theme when someone is using mobile device
but the problem is even if i have two themes they share the settings..if i turn off responsiveness on one theme..the other one gets turned off too..
any help would be really appreciated..
Here is a plugin that will get you half way there.
http://wordpress.org/plugins/responsive-opt-out/
It does everything in the front end so you can do it all with css.
There is a javascript fix using JQuery.
here is some pseudo code
LINK.onclick .find "<meta name="viewport" content="width=device-width">" .replace ""
essentially you javascript will listen for the event of a mouse click on your view desktop link it will search the DOM for some html that should be something like which is what make the site responsive on a mobile (you would still need the stylesheets) upon finding that bit of html it would replace it with a blank string so the site is no long mobile responsive. (it would still appear responsive in desktop browsers as you scale them)

Develop Mobile Theme in Wordpress

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).

How do I hide WordPress from my source code?

Can I hide the code of html + javascript of wordpress pages ?
I mean when anyone hits view source he/she will not able to know that the website was developed using WordPress ?
It is not possible to prevent a user from viewing the source of a website. The web browser needs to be able to render it, so any form of "encryption" would cause the browser to miss-render the page.
There are HTML obfuscation tools online such as this. But you would not be able to use them in WordPress as it generates all it's HTML on the fly.
Rather than hiding the fact that you are using WordPress I would suggest that you ensure your WP install is kept up-to date and that you use sensible security plugins such as Bulletproof Security.
If you simply want to remove the <meta name="generator" content="WordPress 3.4.1" /> tag from your generated HTML, you can add this in your theme's functions.php.
remove_action('wp_head', 'wp_generator');
If you want to remove the "Powered by WordPress" in the footer text, that'll depend the theme you're using. Some themes allow you to customize the footer text from the dashboard, others will need manual modifications in the footer.php.
It will probably still be obvious that you're using WordPress though. A lot of references to uploaded files inside wp-content will be visible and many class names will have the wp- prefix. You probably won't be able to change those without breaking your website.
In general, you can't stop users from viewing the source of your website. The HTML is what defines the markup and content of your website, and the browser simply renders it. The best you can do is obfuscate it in such way that you can't easily tell what each HTML element represents or what each JavaScript function does.
No it's not possible. It'll will always be possible to see it since the browser has to get it in plain text to render it.
Look at JavaScript obfuscation to make your code harder to reuse or understand : How can I obfuscate (protect) JavaScript?
I believe what you're trying to do is hide the fact that your site is powered by WordPress. For that, you can try the suggestions presented here:
How to Hide WordPress Info from Your Source Code

Problem on redirecting website for either mobile or desktop version?

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.

Resources