My website is showing fine responsive behavior when i change the width of my browser window. I also checked it under different view port widths on this studio press responsive testing tool it appears to be working fine. However, when some of my clients checked it on different phones particularly Galaxy S3, they see desktop version of the site, instead of mobile one.
Can somebody please point out what am i missing.
You need a viewport meta tag to tell the device at what scale it should show your website:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Related
The website I'm having problems with is "kayparkmemorials.com". If you view it on your laptop/desktop, and you scale the website down to your smallest possible scalable window, it appears to function as expected responsively. For some reason, when I view the site on my mobile phone, it displays the view as if it's in tablet view.
I have the max-width for mobile view set as: #media screen and (max-width: 815px)
Anyone had any previous issues similar to this and have some tips? Another important thing I should add is that when testing the site on Dreamweaver by scanning the barcode to get the preview on my mobile, it previewed as expected. I didn't change anything to the coding after that point and as soon as it is officially on the web (1&1 HOSTING), the responsiveness on mobile isn't doing what it should.
You need to add a viewport meta tag to the head of your page, if you don't do this the default behaviour for smart phone browsers is to scale your desktop page.
What you want is
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
Good luck!
I've posted this question on the support site for my Wordpress theme but haven't had any luck over there yet.
When I resize my browser window to 360px (360 because thats what my viewport width is on my Samsung Galaxy S6) I see something totally different than when I try to access my site on my phone.
My site is www.andrewpennell.com
What I've designed and am supposed to see is in the picture below.
Correct Design
But that's now what I see on mobile.
When I load my page on my mobile device I see several issues:
a) The background image doesn't seem to scale down - this may just be a simple media query I need to add.
b) My Logo, Name, and Subtitle are no where in sight (although I've seen them randomly load up under the menu bar where I can barely see a sliver of them.
c) At the bottom, social buttons and sharing go behind the footer
My primary concern at the time is problem B.
Any helpful comments are welcome.
Thanks in advance.
Check the source code for the page (right click => view source)
Do a browser find (ctrl-f) for viewport
If you don't see a meta tag something like this:
<meta name="viewport" content="width=device-width" />
then you're going to experience issues with small high res screens like the one on an S6.
I was testing this site that I just developed on wordpress: circoloshowroom.com
and I added all the proper media queries in order for it to be responsive. Now, when I resize the browser window my media queries work fine. However, when I look at the site on my phone or tablet it shows the site fully and the media queries get ignored. Any suggestions? Is it something Wordpress does to my site from the beginning.
Thanks.
I resolved this by adding this to the top of header.php file
<meta name="viewport" content="width=device-width; initial-scale=1.0">
FYI: By default, iPhone Safari shrinks HTML pages to fit into the iPhone screen. The following meta tag tells iPhone Safari to use the width of the device as the width of the viewport and disable the initial scale.
Somethis I just learned from this super helpful blog post: webdesignerwall.com/tutorials/responsive-design
I'm building a mobile optimized page for a my site. I'm new to mobile web optimization.
Everything looks fine on my dev machine, but when I go look at the page on my android mobile browser it looks absolutely tiny because it forces the full vertical section of text to show up in the browser. This does not happen on my desktop browser. Any ideas how I can stop this from happening and have it just show up with the full width in the mobile browser?
You're missing a meta-viewport tag, try this:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" >
The important part is width=device-width, this will make sure that your HTML takes-up the full width of the screen. The initial and max scale properties are set to one to disable zooming, just change the maximum-scale value to something between one and ten to allow zooming.
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.
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