Hey im working on a website for a client, however i think ive missed out something that is really annoying me atm.
http://www.enlock.co.nz/asp-web/source/index.html
here is the preview im providing for client as a small design mockup. You can notice that on web if you resize the page it will change and be responsive however on mobile it will display just as web does without changing to the smaller screen navigation.
also when the page is zoomed in on mobile it doesnt resize.
How would i accomplish this way of makig this change for mobile?
just so your aware i am not an extremely experienced web developer, i am still studying and was given this project by a family friend to do for them.
This is basically the same as what i have done for responsiveness, as shown in w3Schools:
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
Thank you!
For responsive websites you need to include this in your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
--- the responsive meta tag
Related
As the title says the project is not resizing when toggling device toolbar on google chrome, this is particularly annoying as I'm trying to run some media css styling.
Does anyone know what could be the cause of this?
I'm using this starter kit: https://github.com/coryhouse/react-slingshot
With added: https://github.com/styled-components/styled-components for styling.
I'm basically trying to have dynamic components by adding media queries. But it seems like I can't test these media queries without having the window get resized. As you can see in the image below, the size is set to 320x568 but the app is returning 980x1739.
Thanks!
Set a viewport in your html file, something like
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" name="viewport" />
I am using angular-ui-grid (http://ui-grid.info/). Version 3.1.1.
When it is displayed on the computer screen, it displays clearly. When I load it on the ipad it looks blurry. I think it is something to do with the retina screen. Is there any way to fix this so that the text in the grid displays clearly?
UPDATE: I am not sure if it is to do with the retina screen. On a Mac with retina display, it seems ok.
I sorted it out. I used the following meta tag on the page and it looks a lot nicer.
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
I haven't tested it on an android device yet because I don't have one, but when I visit my site on my iphone it looks like the image below. I can't figure out why it loads like that. The site is completely responsive, and I have this in the header:
<meta name="viewport" content="width=device-width, initial-scale=1">
Inside the <header> element of your site, in this div:
<div class="header-ads f-right">
There is a 728x90 google ad, which although it is not visible on your page, is still there and is widening your page and making the rest of your content scale down.
Removing that google ad fixes the issue.
Usually this is because there is some element on the page which is wider than your main content column. Later iPhones tend to zoom out to accomodate this additional content.
Check all the element widths and ensure that none are hard coded values. Use width:100% for full width responsive content.
When viewing my site on mobile device, the site is automatically viewed in mobile version, like the image i have attached below
But i need to view it in desktop view like the image below.
In other words, how to disable mobile view when the site is viewed in mobile device and use the desktop view instead?
It's hard to tell with the information given, but perhaps you're using the meta viewport tag:
<meta name="viewport" content="width=device-width">
If you have something like that in your code, remove it. If your website isn't designed to be responsive, then adding in the meta viewport tag will awkwardly zoom users in.
If you don't want your side responsive, you can manually set a width for the viewport. Add a meta tag like this into your html:
<meta name="viewport" content="width=1024">
where 1024 should be a width that your site looks good. With this number, you can fine tune the appearance of your site.
Also remember to remove any other viewport definitions(especially any width=device-width).
You may have a look at this article: http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design .
If your desire is just to view it in desktop mode / full site for testing (that's what it sounds like to me) and not permanently disable mobile view, than a number of browsers support Desktop view: Android Chrome -> tap on the top right three dots, select 'Request desktop site'.
If you are using this metadata ,just remove it and the site won't be responsive
<meta name="viewport" content="width=device-width">
otherwise you can add metadata for setting your viewport size :
<meta name="viewport" content="width=your-size-in-number">
You may want to read Responsive Web Design - The Viewport
I have installed a Magento 1.9 and found that it is a responsive layout whcih is really good. But I want to disable responsive feature.
Is there any way if I can disable the responsive feature in Magento 1.9.
I tried putting following values in meta tag but it didn't work. I just want website to display desktop layout on mobile devices.
<meta name="viewport" content="initial-scale=1, width=1280, maximum-scale=1" />
Try adding the css...
body {
min-width:1280px;
}
Bear in mind that width is larger than most non-widescreen monitors, however.
I'd probably then remove the maximum scale from your viewport as I think that would prevent someone zooming in, thus making your site unusable on a smart phone.
I'd then try just:
<meta name="viewport" content="width=1280" />
for the viewport.