Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
Is there a Chrome plugin that resizes the navigator window to smartphone or tablet window size (iPhone, iPad, Blackberry,...) ?
Thanks in advance.
Edit: Device Mode in Chrome 38+
Chrome v38+ has window resizing and mobile emulation in a mode called Device Mode. You can activate it either with the icon in the Developer Tools window or with Ctrl+Shift+M (Cmd+Shift+M on Mac).
Windows
As Pedro mentioned in his answer, Window Resizer will work for Chrome on Windows.
https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh
Mac OSX
On Mac OSX, Chrome limits the width at a minimum of 320px. This is the lower end of the spectrum for smartphone window sizes, so this may be enough.
If you still want to get around this limitation, open a popup window with the Open-as-Popup extension. This will allow you to resize down to 100px x 100px:
https://chrome.google.com/webstore/detail/ncppfjladdkdaemaghochfikpmghbcpc
Window Resizer will do the trick.
You can even manually define a screen size.
https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh
Related
I use Chrome Debugger on my PC to debug my web application, and it has a new handy feature where I can set the debuger to a mobile device, in this case Iphone 7.
Supposedly this allows you to emulate a mobile device. However, despite doing this I am getting different results, that is, it is not emulating the iPhone 7 device accurately.
There is an SVG component completely missing in the mobile browser. Very odd.
I have never troubleshot my web app on a mobile device, but need a means to do this. I also need a means to report the debugger as not accurately emulating the mobile device.
I did some googling and found this SO Q/A, however it is about 10 years old.
Here is a screen shot of the emulator and the icon that is actually missing on my mobile device:
Those situations are tricky...you need to use a device emulator such as https://crossbrowsertesting.com/
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am making a website using bootstrap, and all by sudden, the mobile version is shown in google chrome instead of the desktop (using a laptop, not a phone). It does not matter if Inspect element is open or not. In both case the mobile version is shown.
I checked my website on internet explorer, it works fine.
In google chrome, if I choose the toggle device toolbar it is also working fine.
Things I tried:
My google chrome is updated.
I reset the laptop and visual studio.
I cleared cookies.
Does anybody know what is the problem?
By the way, I am using visual studio code(text editor).
This a screenshot of the website on localhost, i did not zoomed. as you see the navbar toggle is shown for desktop:
https://imgur.com/a/vM3aax6
Update: the problem is fixed with reinstalling google chrome!
Open the Developer tools by pressing F12 on the keyboard.
Click on the mobile toggle button which is in the left of the element tab. Or you can use the keyboard shortcut Ctrl + Shift + M.
Your mobile view mode will be closed.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have some GIF files on my site which are all rendered extremely smooth on every browser excluding FireFox.. the following screens depict what I mean:
EXAMPLE 1
Here is rendering of a GIF on basically Safari/Opera/Chrome.. very smooth.
Here is the rendering on FF.. very choppy and semi distorted lines.
EXAMPLE 2
Rendering on Opera/Safari/Chrome, once again very smooth.
Rendering on FF, once again very choppy.
Is this a browser defect that has to be adjusted with settings or? So far I have negated this by adding some browser sniffing logic (which I don't want to do) and placing in a smaller rendition of the GIF. Any suggestions?
UPDATE
Here are the actual GIF's.. open this question in FF and please provide feed back
Be sure that your image is 100%. Sometimes the “halve pixels” can cause troubles on image rendering.
Also, some browsers and some versions tend to display the image differently. At that point, I don't think there's anyting that can be done about that.
Hope it'll help!
There's a possibility the browser is resizing your image. To avoid this, it's advisable you make the dimensions for your web browser 100% instead of setting width = 1024px. This may not fix all the issues but would at least help fit the GIFs properly into the screen.
Google Chrome Version 78.0.3904.108
Firefox Version 71.0 (64-bit)
Unable to find any difference on latest versions.
I know that this is more of a hack than a fix but you can add
in your css
.element{
filter:blur(0.33px);
}
I use this on fonts & some images to make them appear smoother, different elements need different amounts of blur but anywhere between 0.24 & 0.54px usually makes fonts and images a lot smoother & removes some level of pixelation.. But I would suggest try the other answers first.
The browser may be resizing the image. Resized images lose quality.
Look up lossy images. This may help you.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
On http://quizdash.co.uk/ Internet Explorer got HUGE error: it scaling site content to all screen, but in develepment panel, it say that content not scaled and has original size.
http://storage2.static.itmages.com/i/16/0201/h_1454300006_8737908_ad9e854b85.png
Of course, scale option=100%.
Other browsers show site correctly.
Is this undocumented feature of modern IE? Can I with css/html make IE do not scale site?
It's not an error in IE or an undocumented feature.
In your vendor.css, the following CSS appears:
#-ms-viewport{width:10in;zoom:1;initial-scale:1;max-zoom:1}
#-o-viewport{width:10in;zoom:1;initial-scale:1;max-zoom:1}
#viewport{width:10in;zoom:1;initial-scale:1;max-zoom:1}
That's causing the page to scale with the viewport. The only browsers that support #viewport are IE and Opera Mini, so the page will only scale in those browsers. As far as the CSS is concerned, the page is displaying correctly in IE, not the other browsers, so your assertion that the other browsers are showing the site correctly is wrong. However I cannot comment on whether IE is "lying" about computed pixel sizes because I don't know how or if viewport scaling should affect computed values.
If you don't want the page to scale with the viewport, don't use #viewport.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am working on a RWD site with a fixed side navigation that fits to the top of the page when viewed on anything smaller than an iPad. The problem I am running into is when I switch the view to vertical on an iPad the navigation menu on the top of the page disappears. This only happens on the iPad as far as I can tell.
(keep in mind this is still under development so if you see any bugs please let me know!)
You have in your style.css file set display to none when max-width is 768px, which is iPad's width on horizontal mode.
#media (max-width: 768px) {
[...]
.midnav {
display: none;
}
By the way, if you connect your iPad to the computer, then you can use the element inspector for your iPad if you open Safari and select on the Develop menu your connected iPad. This is very cool and very helpful.
At various points in your style sheet, you have your menu sections set to display: none;. You are then relying on #media rules to display them again, but they are falling through a few cracks (you are playing Russian roulette with them!).
You can test what's happening in your desktop browser. Slowly resize Chrome, and when you get to about the width and height of an iPad, you see all menus disappear. I recommend you use tests like this while setting up your #media rules.