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" />
Related
I'm building a React app that can be injected in a page as a normal html element. I ran into the issue of webpages that don't use the viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1">. I am required to make my injected element scale properly on mobile devices, even though the page it is injected into doesn't.
I've tried adding classes that represent the current viewport width and using them similarly to media queries, however I can not deal with the font sizes not scaling properly, since using rems would use the page font size which itself doesn't scale.
I even resorted to using transform: scale((window.innerWidth / window.screen.width).toFixed(3)) but that is hardly controllable.
Any ideas on how can I achieve this?
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
Background of the problem - I am creating a simple HTML landing page using create react app node package manager.
I started having problem when I tried to make the website mobile friendly.
Specific problem -
When I check the create react app public folder, I do not see anything wrong with the viewport meta tag and it is as is should be.Here is another screenshot.
When I open the website on the mobile its zoomed in and the background color is out of proportion. I am guessing it is happening because of viewport meta data not getting rendered correctly.
Anyone with a react and CSS skill combined will be able to figure out what is making this happen. I am attaching a gif of the problem below.
link two
I need help with fixing the viewport meta data for a landing page created using Reacts scaffolded 'Create react application'.
I am trying to make the site mobile friendly however am facing the following issue. Kindly load the following link on a mobile device or mobile simulation mode in the browser.
http://sagarmunjal.github.io/learnreactjs
Also, when the page resizes. I would want to learn how to make the text resize/ adjust according to the window being resized.
The code is available at master branch. https://github.com/sagarmunjal/learnreactjs.git
Any solutions are highly appreciated.
Your .Hero-h1 has a font size of 3.5em which is making the title stretch outside of the page making it bigger than it should be. This might be a problem with more of your layout.
I suggest you look into media queries if you want to make a responsive website. Here is a good article on the subject: https://css-tricks.com/css-media-queries/
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>
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