ब्राउज़र 400px से कम नहीं है?


151

मैं एक तरल शैली की शीट को एक साथ रखने पर काम कर रहा हूं और यह अद्भुत काम करता है। एक चीज़ जो मैंने देखी है कि क्रोम में मेरी ब्राउज़र विंडो 400px से नीचे की नहीं होगी, यह बस वहीं अटक जाती है और FF में जैसे-जैसे मैं इसे नीचे गिराता हूँ, यह लगभग 400px पर रुक जाती है और फिर एक क्षैतिज स्क्रॉल पट्टी को पॉप करती है।

जब मैं अपने फोन पर साइट खोलता हूं तो यह 320px के आसपास एकदम सही लगता है, इसलिए मुझे पता है कि यह 400px से कम है।

अगर किसी को पता था कि यह ब्राउज़र / डेस्कटॉप चीज़ है या अगर मुझे अपने सीएसएस के अलावा कुछ और दिखना चाहिए, तो मैं उत्सुक था। मेरे पास कोई भी न्यूनतम चौड़ाई की घोषणा नहीं है, इसलिए मुझे यकीन नहीं है कि यह क्या कारण हो सकता है।

फिर से डेस्कटॉप पर यह लगभग 400px की न्यूनतम चौड़ाई तक पहुंच जाता है और रुक जाता है, लेकिन जब मैं इसे अपने फोन पर खोलता हूं तो यह फोन स्क्रीन के आकार को मापता है जो लगभग 320px होता है ... जिज्ञासु क्यों बहुत कम से कम इसे जीता डेस्कटॉप पर 320px तक नीचे पैमाने पर नहीं।

-edit- यह भी निश्चित नहीं है कि क्या यह मायने रखता है, लेकिन ओपेरा इसे बहुत कम करने की अनुमति देता है ... तो यह ओपेरा के साथ काम करता है और क्रोम या एफएफ में नहीं ... कोई विचार?


1
मुझे याद है कि क्रोम एक छोटी ईंट के साथ समाप्‍त हुआ करता था। तो यह कुछ ऐसा है जो उद्देश्यपूर्ण रूप से पेश किया गया था। वर्तमान Chrome पर मैं देखता हूं कि विंडो केवल आइकनों की शीर्ष पंक्ति जितनी छोटी होगी। होम बटन या एक्सटेंशन आइकन छुपाने से मैं इसे थोड़ा छोटा कर सकता हूं।
म्रतशर्मन

7
यह आपके सीएसएस और मार्कअप के बारे में कुछ विशिष्ट होने जा रहा है। समीक्षा के बिना कुछ भी सवाल नहीं है। अंधेरे में शूटिंग का अनुमान वास्तव में एक उपयोगी दृष्टिकोण नहीं है। उस स्थिति में, आपको अपने आप से डीबग करना होगा।
जारेड फरिश

3
हाँ, मुझे पूरा यकीन है कि बस ब्राउज़र विंडो की अपनी शाब्दिक न्यूनतम चौड़ाई है, जैसे किसी भी कार्यक्रम की न्यूनतम चौड़ाई होती है, यह स्वयं को आकार बदलने की अनुमति देता है। मेरा क्रोम 250px व्यूपोर्ट से किसी भी छोटे आकार का नहीं हो सकता है।
justisb

1
क्रोम 33 ने इसे 400px
स्पार्कअप

4
"यह आपके सीएसएस और मार्कअप के बारे में कुछ विशिष्ट होने जा रहा है" ... एहम नहीं वास्तव में यह नहीं था।
स्टिजन डे विट

जवाबों:


253

क्रोम क्षैतिज रूप से 400px (OS X) या 218px (विंडोज) से नीचे नहीं बदल सकता है, लेकिन मेरे पास समस्या का एक बहुत ही सरल समाधान है:

  1. वेब इंस्पेक्टर को नीचे की बजाय दाईं ओर डॉक करें
  2. इंस्पेक्टर पैनल का आकार बदलें - अब आप ब्राउज़र क्षेत्र को वास्तव में छोटा कर सकते हैं (नीचे 0px)

अपडेट: क्रोम अब आपको दाईं ओर डॉक किए जाने पर इंस्पेक्टर खिड़कियों को लंबवत व्यवस्थित करने की अनुमति देता है! यह वास्तव में लेआउट में सुधार करता है।

ऊर्ध्वाधर पैनल लेआउट सेटिंग

HTML और CSS पैनल वास्तव में अच्छी तरह से फिट होते हैं और आप एक छोटा कंसोल पैनल भी खोलते हैं। इसने मुझे फ़ायरफ़ॉक्स / फायरबग से क्रोम तक पूरी तरह से स्थानांतरित करने की अनुमति दी है।

इंस्पेक्टर ने ऊर्ध्वाधर पैनल लेआउट के साथ दाईं ओर डॉक किया

यदि आप वेब इंस्पेक्टर सेटिंग्स (कोग आइकन, बॉटम-राइट) पर एक कदम आगे जाना चाहते हैं , और उपयोगकर्ता एजेंट टैब मिला है। आप स्क्रीन रिज़ॉल्यूशन सेट कर सकते हैं जो आपको यहाँ पसंद है और यहां तक ​​कि पोर्ट्रेट और लैंडस्केप के बीच जल्दी से टॉगल करें।

डिवाइस रिज़ॉल्यूशन सेटिंग्स

अद्यतन : यहाँ एक और बहुत अच्छा उपकरण है जो मैंने देखा है। http://lab.maltewassermann.com/viewport-resizer/


1
+1 निरीक्षक इसके लिए आदर्श है, यहां तक ​​कि उपयोगकर्ता-एजेंट आदि को सेट करने की अनुमति देता है
GDmac

2
आप आदमी हो। और यह छोटे स्क्रीन को डीबग करने के लिए भी सरल है, जब एक उपयुक्त बड़ा निरीक्षक-विंडो है।
aebersold

1
धन्यवाद @aebersold यह मोबाइल लेआउट पर काम करते समय एक अच्छा बड़ा इंस्पेक्टर खिड़की हो रही एक अच्छा बोनस है।
ओइसिन लैवरी

3
IMO यह स्वीकृत उत्तर होना चाहिए। विचार सरल और शानदार है, और मैट्रिक्स ओवरराइड के ऊपर आपका संकेत भयानक है। और ऐसा ही बुकमार्क आपके द्वारा लिंक किया गया है!
11

5
किसी और को पता नहीं चल सका कि डेवलपर टूल को दाईं ओर कैसे डॉक करें? stackoverflow.com/questions/10023640/…
एर्टि-क्रिस इल्मा

36

यह आपके ब्राउज़र पर आपके द्वारा इंस्टॉल किए गए ऐडऑन के कारण हो सकता है। टूल बार से सभी ऐडऑन आइकन हटाएं या छिपाएं और पुनः आकार आज़माएं। जब ऐडऑनर्स ब्राउज़र होते हैं तो केवल एड्रेस बार का आकार बदलता है और एडोनों को दिखाई देता है।

अपडेट: 7/14/2013


नवीनतम क्रोम संस्करण के साथ, अब आप एड्रेस बार को फिर से आकार दे सकते हैं और यह स्वचालित रूप से एडोनों को छिपा देगा।


4
जब ऐडऑन होते हैं, ब्राउज़र केवल एड्रेस बार के आकार का आकार बदलता है और एडोनों को दिखाई देता है। आशा है कि आप इसे समझेंगे। यह ऐडऑन का साइड इफेक्ट नहीं है। लेकिन जब addons स्थापित होते हैं तो ब्राउज़र न्यूनतम मूल्य का आकार नहीं बदल सकता है। ऐड्रेस बार के आगे ऐडऑन आइकन के कारण।
चामिका संदलमल

2
Chrome में सभी ऐडऑन आइकन को हटाने से यह मेरे लिए हल नहीं हुआ। nayan9 का समाधान किया।
एंड्रयू शूनर

31
इसका जवाब नहीं है । सभी ऐडऑन / एक्सटेंशन अक्षम होने के बावजूद, Chrome की न्यूनतम चौड़ाई अभी भी 400px है।
ओइसिन लैवरी

4
@ChamikaSandamal यह सही नहीं है। ओपी अपनी खिड़की को 400px से नीचे रखने की कोशिश कर रहा है। क्रोम में यह असंभव है क्योंकि ब्राउज़र में 400px की हार्ड मिन-चौड़ाई है। ओपी को जिस प्रभाव की तलाश है, उसे प्राप्त करने का एकमात्र तरीका शेरनौत का जवाब है। आपका जवाब उपयोगकर्ता को 400px की कठिन न्यूनतम चौड़ाई के करीब पहुंचने में मदद करने से परे कुछ भी नहीं करता है, जो ओपी की तलाश में नहीं था।
फ्रेड स्टीवंस-स्मिथ

2
@ChamikaSandamal जबकि यह आपके लिए काम कर सकता है, यह हममें से बाकी लोगों के लिए काम नहीं कर रहा है। यह आपके खिलाफ कुछ भी नहीं है। यह बस इतना है कि यह उत्तर हमारे लिए समस्या को ठीक नहीं करता है।
डीए।

19

मैं भी स्टम्प्ड था, लेकिन एक सरल समाधान के साथ समाप्त हुआ। मैंने अभी नई विंडो खोलने के लिए लिंक के साथ एक HTML फ़ाइल बनाई:

<a href="javascript:window.open('your_url_here', '','width=320,height=480')">Open!</a>

इस नई विंडो में एड्रेस बार के अलावा कुछ नहीं है और क्रोम ने मुझे नीचे 111x80 पर इसे फ्रीज करने की सुविधा दी है।


1
LOL, एक साधारण काम करने के लिए हैक के बारे में बात करते हैं
ओटो

17

nayan9 का समाधान बहुत अच्छा काम करता है, और इसे html फ़ाइल बनाने के लिए बिना बुकमार्क में रखा जा सकता है। Chrome में, URL के साथ एक नया बुकमार्क बनाएं:

javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();

और इसे "ओपन स्मॉल विंडो" या कुछ इसी तरह का नाम दें। यह आपको क्रोम के भीतर आकार प्रतिबंध के बिना आसानी से खिड़कियां खोलने की अनुमति देगा। ध्यान दें कि इसे केवल अपने एड्रेस बार में कॉपी करने से काम नहीं चलेगा - क्रोम "जावास्क्रिप्ट:" को स्ट्रिप्स करता है।


यह जवाब है कि मेरे लिए काम किया है। ट्वीडेक के आकार के रूप में संभव के रूप में छोटे होने के लिए उपयोगी है।
क्रुग

10

यदि आप विभिन्न उपकरणों का अनुकरण करने के लिए अपनी स्क्रीन की चौड़ाई कम करना चाहते हैं (और आप ऐसा क्यों करना चाहते हैं?)?

क्रोम में अब अपने इंस्पेक्टर में एक एमुलेशन सेक्शन है, जो शीर्ष मेनूबार (आवर्धक कांच और तत्वों के बीच) में छोटे फोन आइकन पर क्लिक करके सक्रिय होता है:

क्रोम एमुलेशन आइकन

इम्यूलेशन मोड आपको व्यूपोर्ट आकार को सभी सामान्य मोबाइल स्क्रीन आकारों में सेट करने की अनुमति देता है, अन्य अच्छी विशेषताओं में, जैसे स्पर्श, जियोलोकेशन और यहां तक ​​कि एक्सेलेरोमीटर इनपुट:

यहाँ छवि विवरण दर्ज करें


सबसे प्रभावशाली, मैं उस सुविधा के बारे में नहीं जानता था ... आखिरकार मैं उपयोगकर्ता-एजेंट स्विचर से छुटकारा पा सकता हूं और मोबाइल उपकरणों का ठीक से अनुकरण कर सकता हूं, धन्यवाद !! +10 इस तक
andreszs

इस सुविधा को "टॉगल डिवाइस टूलबार" द्वारा
लाल मटर

6

Nayan9 और drinkdecaf ने जो कहा है, उसे जोड़ते हुए, आप केवल 320. विंडो में जिस पृष्ठ को देख रहे हैं, उसे देखने के लिए document.URL को window.open में कॉल कर सकते हैं। यदि आप स्क्रॉलबार की अपेक्षा कर रहे हैं, तो आप चौड़ाई में कुछ और जोड़ना चाहते हैं।

javascript:(function(){window.open(document.URL, '','width=320,height=480');})();

3

क्रोम में DevTools काफी हद तक आगे बढ़ गए हैं जब इनमें से अधिकांश जवाब पोस्ट किए गए थे। इस मुद्दे को संबोधित करने का सबसे अच्छा तरीका अब क्रोम में निर्मित एमुलेटर का उपयोग करना है।

एमुलेटर का उपयोग करने के लिए DevTools (प्रेस F12) खोलें और फिर निम्न आइकन पर क्लिक करें Device Toolbar:

भक्तों का बटन

इसके बाद आप जो भी मोबाइल डिवाइस या व्यूपोर्ट आकार चाहते हैं, उसका अनुकरण कर सकेंगे।


2

क्रोम में शीर्ष दाएं कोने में आपके एडोन के आइकन समस्या का कारण बनते हैं

-> अधिकतम चौड़ाई में एड्रेस-बार (जहां आप यूआरएल टाइप करते हैं) का आकार बदलें (बार को दाएं किनारे पर बार खींचें)

या आइकन को अक्षम करें


2

मैं आलसी हूं, इसे और भी आसान बनाने के लिए, बुकमार्कलेट उपयोगकर्ता से आकारों के लिए पूछें :-D

javascript: (function() {var width = prompt('Enter window width:', '320');var height = prompt('Enter window height:','480');var url = prompt('Enter window URL');if (url.indexOf(':') < 0) {url = 'http://'+url;} window.open(url, '','width='+width+',height='+height);})()

1

मुझे इसके लिए एक त्वरित समाधान मिला।

बस क्रोम पर उत्तरदायी वेब डिज़ाइन ऐड-ऑन स्थापित करें, और यह पता बार और टैब के बिना एक अलग विंडो खोलेगा, जिसे 10 पीएक्स या उससे कम स्केल किया जा सकता है।

यहाँ लिंक करें: https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related


1

मैं इसी तरह के मुद्दों का सामना कर रहा हूं और बस एक अच्छा काम पाया है। अपने क्रोम devtools खोलें और ऊपर बाईं ओर, एक छोटी स्क्रीन और आईपैड आइकन है। उस पर क्लिक करें और यह आपके पृष्ठ का मोबाइल दृश्य खोलता है। आप इसे पूर्वनिर्धारित उपकरणों या एक कस्टम रिज़ॉल्यूशन पर सेट कर सकते हैं। वास्तव में सुंदर निफ्टी।


0

एक और आसान उपाय है, Incognito Mode में प्रवेश करने के लिए Strg + Shift + N पर क्लिक करना। वहां आप अपनी ब्राउजर विंडो को जैसा चाहें वैसा आकार दे सकते हैं।


2
मैक 10.9 क्रोम पर 38.0.2125.104 यह मामला नहीं है
जियोथेट्री

1
लिनक्स क्रोमियम 44.0.2403.89 पर यह मामला नहीं है
इकर पोहोरस्की

विंडोज 8 क्रोम संस्करण 74.0.3729.131 (आधिकारिक बिल्ड) (64-बिट) पर यह मामला नहीं है
लाल मटर

0

मुझे यह टूल पसंद है क्योंकि यह आपको मोबाइल साइज़ के लिए पोर्ट्रेट / हॉरिज़ॉन्टल के बीच आसानी से स्विच करने देता है। यह आपको एक व्यक्तिगत बुकमार्क करने की अनुमति देता है, इसलिए यदि आप अक्सर अस्पष्ट प्रस्तावों के लिए डिज़ाइन करते हैं, तो आप उन्हें सहेज सकते हैं और उनका उपयोग कर सकते हैं।

मुझे इन उपकरणों में से एक का उपयोग करना पड़ा क्योंकि उपरोक्त उत्तर के साथ भी मैं अपनी खिड़की को 320 के पैमाने पर ठीक से नहीं पा सका, यह उपकरण कुल मिलाकर एक तेज़ समाधान है।

http://lab.maltewassermann.com/viewport-resizer/


0

मैं हमेशा पिन किए गए टैब के साथ इस समस्या में भाग रहा हूं। यदि कोई हो, तो क्रोम आठ दृश्यमान पिन वाले टैब की क्षैतिज चौड़ाई से कम नहीं होगा! बस उस टैब को अलग करें जिसे आप इसे हल करने के लिए आकार बदलना चाहते हैं ...


0

स्टैकओवरफ़्लो समुदाय और मेरा यह प्रयास मेरा पहला योगदान है कि आप सभी अद्भुत लोगों को वापस भेज दें जिन्होंने इंटरनेट को इतना शक्तिशाली उपकरण बना दिया है। अब एंसर: सफारी में, यह अच्छा फीचर है। आपको वरीयताओं में सफारी डेवलपर विकल्प को सक्रिय करने की आवश्यकता है। डेवलपर मेन्यू के लिए सफारी में प्राथमिकताएँ स्थापित करने का स्क्रीनशॉट

एक बार सक्रिय होने के बाद आप बहुत शक्तिशाली डेवलपर टूल के गुच्छा तक पहुँच सकते हैं। इस टूल में से एक व्यूपोर्ट एडजस्टमेंट है जिसका इस्तेमाल आपकी वेबसाइट रिस्पांसिबल लेआउट को टेस्ट करने के लिए किया जा सकता है। संवेदनशील ले आउट परीक्षण को सक्रिय करने के लिए, सफारी शॉर्ट पोर्ट समायोजन विकल्प को सक्रिय करने के लिए शॉर्ट कट Cmd + ctr + R का उपयोग कर सकते हैं। यह आपको विभिन्न दृश्य पोर्ट आकारों पर अपनी वेबसाइट का परीक्षण करने के लिए पर्याप्त नियंत्रण देगा।

एक बार उत्तरदायी लेआउट परीक्षण विकल्प सक्रिय होने के बाद आपकी ब्राउज़र विंडो कैसे दिखेगी इसका स्क्रीन शॉट।

  1. सफारी में डेवलपर मेनू को सक्रिय करने के लिए लिंक: https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/

-4

बहुत सारे स्मार्ट फोन ज़ूम करने के लिए पेज को अपनी स्क्रीन के आकार में फिट करने के लिए स्केल करते हैं। आपकी न्यूनतम पृष्ठ चौड़ाई संभवतः 400px है। किसी भी उदाहरण के कोड के बिना, मुझे लगता है कि यह सब कहा जा सकता है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.