I'm trying to make a website responsive and looking good on smartphones and tablets.
Here's a link to this website: http://fineart.d.dev.vendo.no/
The problem is that my mobile devices don't see a media queries I wrote specifically for them.
I know that this question is really often asked here on Stackoverflow but I didn't found any solution for this problem. Here's my code:
#media only screen and (max-width: 768px) {
/* Some mobile-specific code goes here */
}
I tried to use max-device-width and added
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
to the section but without success :(
Could you please help me to solve this issue? I realy stuck with it and need your help.
Thank you in advance!
I'm not seeing the viewport meta tag in the head of the page -- am I missing something?
I would recommend using this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Having "maximum-scale=1" will prevent users from scrolling, which is commonly seen as an accessibility problem. Let a user zoom if they need to.
As for the media queries, I looked at your CSS, but I didn't actually see any media queries present. Are you sure that the CSS file with those queries loading?
Related
I recently launched a site I was working on and with a responsive theme, but it displays the desktop version on cellular devices. It works properly on my staging site, but after migration, the live site does not display properly.
Live Site: http://www.sterlinganalytics.com
Stage Site: http://stage.sterlinganalytics.com
I have already cleared the cache and got the same result.
Unless I missed it, I believe you are missing the responsive meta tag on the live site:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I am developing a webapp using angularjs. The webapp loads perfectly fine when the mobile device language is set to any except Chinese. I debugged a lot and found the issue that the web app is not loading because of the meta view port tag in the index.html. As soon as I remove the width and initial scale from meta viewport tag, the web app loads successfully in the mobile when the language is set to Chinese. navigator.language = "zh-CN" May I know the reason why this is creating problem when navigator.language is set to Chinese ? Is there any other alternate solution to make my webapp working?
Having the below meta tag in the index.html, doesn't render my app properly if language is set to Chinese
But if I remove the width and initial-scale, then the app renders properly if language is Chinese.
<meta name="viewport" content="maximum-scale=1.0, user-scalable=no, minimal-ui"/>.
I also tired a sample app, but the issue is observed there as well. Please see below my index.html where you can easily reproduce the issue in any Android phone. I tried in my S3 and also in a S4 device . Please help me on this issue. You can copy the below index.html and load it in your apache server to see the issue. The moment you remove the width and initial-scale from the DOM element, you can see the app loads perfectly.
Please help on this issue
Instead of setting initial-scale and/or user-scalable, try combining a minimum and maximum scale. For example:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
You don't need to use minimal-ui. Apple dropped support for this in iOS8.
It's never a good idea to set maximum-scale nor to set user-scalable="no" because it stops people from being able to zoom, which they may need to do.
It would be interesting to see what happens when you remove these and simply use the viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I cannot see how the language would be causing this to happen, but it clearly is occurring, it sounds like a very interesting edge case.
Have you also tried other Chinese related lang settings such as "zh" or "zh-Hans"?
I also wonder if it's related to the font, and thus related to this question?
Why the extreme responsive in the pc and mobile web page is different?
I've used the following code to create responsive......
<meta name="viewport" content="width=device-width" />
in chrome resized
in iphone 5
(1) Double check you have indeed included a veiwport meta tag in the head of your document, I'm not seeing it on the link you posted
<meta name="viewport" content="width=device-width, initial-scale=1.0">
(2) I'm seeing a 404 for http://foadalijani.com/include/css/top_nav.css
(3) Use web inspector to look for elements which may be breaking your responsive layout. e.g. Looks to me that that .home_menu_top_bg has a hard coded width of 890px which will cause problems. Maybe change this to a percentage. I think there are other elements with similar issues.
Good luck!
I have created a non responsive design (intentionally) but find that is cutting off on the right on mobiles and tablets. I want the mobile sites to look identical to the desktop version. The url is http://wantherwardrobe.com/
I'm seeing your site in my iPhone and it seems that you have a «mobile theme» or something. To maintain the aspect of the site trough devices you should change this tag:
<meta name="viewport" content="width=1290">
to this:
<meta name="viewport" content="width=device-width"/>
Hope this helps
I created a simple website: http://mpl.mediatech.co.in using Foundation 5, and it works ok on Desktop / Firefox Responsive Design View:
but on the iphone / android phones, it looks like this:
What am I missing?
I had missed out on adding this important meta tag...
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
That fixed it. Leaving the question up in case someone else does the same mistake.