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.
Related
I am working on a site on a Github repository and I published it live on another server so that I can play around with APIs and databases. After making an exact copy of the Github files and dropping that into the new server, the media queries aren't working on my desktop or mobile. They do however work on Github.
I've tried to clear the cache on both devices, and after doing that, it shrinks down only by directly making the browser window (on my computer) smaller and not going to inspect tools. If I use the inspect tools or use my phone, it is not responsive at all. I was also told it can take 24-72 hours for sites to fully migrate, but don't know if that's the issue since I published it on Sunday night 02/14/21. I had someone else look at it on their computer and they said it seems to be responsive.
This is the very first site I've published so I don't know the ins and outs yet. What else could it be? I'll post the link to my site and also a screenshot of what it looks like on mobile.
http://creativecog.design/
Try adding this in the head of your document
<meta name="viewport" content="width=device-width, initial-scale=1">
Also why do you have two heads set up and two html elements as this will be causing your issues
We're experiencing an issue with our site, YouSIMUL8.com. We use this site to allow people to run simulations on the web. An example simulation can be found at http://www.yousimul8.com/watch.php?x=4d5005d769d31.
If you have a look at what's going with this page, when you press play it loads an iframe in and the simulation is shown there.
I've been speaking to a customer who has been having difficulty using the site. When they open a simulation, only the border of the iframe is shown and nothing else happens. This is using IE10. The problem disappears when compatibility view is turned on.
I cannot replicate this issue with IE10 no matter how hard I try. The customer's IT is outsourced so they cannot access the settings, developer tools or console in IE.
So the question is this: What configuration of the client's machines could cause this behavior?
To force to the rendering of the page to latest version of IE, overriding the automatic compatibility view, try to use the Meta Tag Compatibility View:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Have a look to this StackOverflow post.
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 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).
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.